JavaScript学习从入门到精通

www.7dspace.com  更新日期：2005-8-16 3:13:06  七度空间

第九天 事件的处理
------------------------------------------------

　　昨天我们说了对象包括属性,方法,事件,今天我们就来看看怎么理解事件这个概念.

　　我们从一个例子开始,昨天我们说到一个使页面后退的方法history.back(),从这一页跳都后一页就完成了一个事件,但我们需要区分开的是方法是这个事件的入口,也就是你打开门的钥匙,而你用钥匙打开门的过程才叫事件.

　　事实上比事件本身更重要的是事件响应的过程.就象你用钥匙到底是向左旋转还是向右旋转才能打开门才是我们要关注的过程,我们把这个过程称为处理事件,这也就是我们今天要讨论的主题.

　　我们处理一个JS事件通常包括两个步骤:

　　1.把相应的事件处理程序设置属性,放在对象的HTML标识中.
　　2.设置属性的值等于一个你要充当事件处理程序的语句或函数.

　　现在我们把他们做一步来完成再来解析,假设我们按一个按钮之后弹出一个欢迎菜单.
＜input type="button" value="wlecome" onClick="alert('welcome')"＞

　　我们只要注意到onClick="alert('welcome')"这就是一个事件的过程,在这句中,我们应用了一个事件名Click,on事件名,就设置事件处理程序的属性.而="alert('welcome')"就是给这个事件加上属性值.通过
"on事件名=表达式或者函数",我们就可以完成一个事件的处理过程.下面我们看个完整的例子:
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript"＞
function wel_come(){
var user_name=prompt("输入你的用户名:","")
var xian_shi=user_name!=""?","+user_name+"!":"!"
alert("欢迎来到H.S Workshop"+xian_shi)
}
＜/script＞
＜/head＞
＜body＞
＜form name="form1" method="post" action=""＞
＜input type="button" value="输入你的名字" onClick="wel_come()"＞
＜/form＞
＜/body＞
＜/html＞

　　在这里我们让用户选择是不是要输入用户名,当按下按钮之后我们就调用wle_come()函数.

　　当我们没有HTML标识可以调用建立事件处理过程的时候怎么办呢？我们回到最初，在昨天我们已经知道事件包含在对象这个集合中，事实上任何对象的事件处理程序就是这个对象的属性.我们在HTML标识中建立一个事件处理程序时，就是见见解的改变了所处对象的事件处理程序的属性.这也就以为着我们还可以使用下面的语法来为一个对象建立事件处理程序:

　　对象名.on事件名=处理事件的函数名(注意这里的函数名后面不需要再加上小括号了)
假设我们建立了一个chilk()函数，当我们要在上述情况下调用的时候我们就应该写成:
document.onClick=chilk

　　这里我们还要注意到一个问题,之前我们说属性的时候就应该知道了~属性是相对于自己的属性的对象，当我们要应用导致事件触发的对象的时候我们应该怎么办呢？简这时候就需要用到this这个关键词.看个例子：
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript"＞
function click_look(image_object){
alert(image_object.src)
}
＜/script＞
＜/head＞
＜body＞
＜img src="TN_wallpaper03.JPG" onClick="click_look(this)"＞
＜/body＞
＜/html＞

　　在这个例子中我们想显示出图片的位置，也就是说需要调用这张图片的src属性的值.我们就通过this来把这张图片src的值返回给函数click_look(),然后用alert()来显示出来.

　　OK~通过上面我们了解了如何建立一个JS事件,但我们必须是知道一个对象有属于自己独有属性和方法,
但很少会有对象独有自己的事件,一个事件可能会和两个甚至更多的对象有关,在这里我把与三个以上的对象有关事件浏览一下.其他与一个或者两个对象有关的事件我们在以后提到这个对象的时候再详细的说明:

　　Focus获得焦点
　　焦点,顾名思义你目光集中的地方,例如我们在文字输入框中点击一下就会有闪烁的光标,接下来你输入的文字就在这个光标后出现,我们就说这个文字框有了焦点.例如我们建立一个表单,在状态栏中想用户介绍这个表单项目是做什么用的,我们就可以同过下面的段脚本来实现:
＜body＞
＜form＞
＜p＞
姓:
＜input type="text" onFocus="status_look('输入你的姓')"＞
＜p＞
名:
＜input type="text" onFocus="status_look('输入你的名')"＞
＜/p＞
＜p＞
＜input type="submit" value="提交" onFocus="status_look('提交你的表单')"＞
＜input type="reset" value="重置" onFocus="status_look('重置你的表单')"＞
＜/p＞
＜/form＞
＜script language="javascript"＞
function status_look(field_message){
window.status=field_message
}
＜/script＞
＜/body＞
　　我们看到,当我们在表单项目上切换光标的时候,状态栏中就显示出相关的信息,我们就是通过onFocus来把这个表单项目已经获得焦点的消息捕捉到,并传递给函数status_look(),通过window.status这个属性改变状态栏的内容.由此而我们可以看出onFocus就是引发当对象获得焦点之后所发生的事件.

　　Blur失去焦点
　　当我们把光标移开,也是表示对象失去了焦点,这时候我们就可以用到Blur事件.通常我们可以用这Blur来检查用户是否输入正确,如果用户离开这个区域而输入错误的话,我们就可以弹出一条警告来告知用户书写错误,相信你也经历过一些当你进行了第一次提交表单之后才发现自己用了一些不合法的输入,而又要重新输入的问题吧~现在我们就来解决这个问题.看个例子:
＜body＞
＜form＞
＜p＞
请输入你的姓名:
＜input type="text" onBlur="xian_shi(this)"＞
＜/form＞
＜script language="javascript"＞
function xian_shi(text_field){
if(text_field.value==""){
alert("不能为空!")
text_field.focus()
}
}
＜/script＞
＜/body＞
　　当用户没有输入姓名而跳出输入框的时候,我们就弹出一个信息提示用户必须输入一个值,我们看看这个工作的流程,当我们使文字框失去焦点的时候,onBlur就会把这个消息传递给函数xian_shi(),在函数中我们用if()来判断this的返回值中value是不是为空,如果是的话就弹出一条消息警告用户,再通过focus()把焦点换给文字框.需要说明的是我们把text_field.focus()称之为模拟方法,确切的说我们就是把这个事件在这里假设成为对象的方法.

　　说到这里我门必须讨论一下Blur和Focus事件带来的死循环,就向上面这个例子,如果我们在表单区中插入一条或者几条＜input type="text" onBlur="xian_shi(this)"＞马上我们就陷入了一个死循环,这是需要避免的死循环.很多的程序员都避免用Blur事件来检验表单的有效性,我觉得解决办法之一就是不强制的把焦点还给文字框，我们就把上面的例子改一下:
＜body＞
＜form＞
＜p＞
请输入你的姓名:

＜input type="text" onBlur="xian_shi(this)"＞
请输入你的生日:
＜input type="text" onBlur="xian_shi(this)"＞
＜/form＞
＜script language="javascript"＞
function xian_shi(text_field){
if(text_field.value==""){
alert("不能为空!")
}
}
＜/script＞
＜/body＞

　　我们把text_field.focus()去掉，就不会造成两个表单之间Blur和Focus事件的循环,虽然我们损失了使没输入正确信息的栏目重新获得焦点的权利，但避免了死循环，正所谓鱼翅熊掌不可兼得.

　　Change处理被修改的表单数据
　　从在某种程度上来说，Blur违反了编程规则中不要运行没有必要的代码。事实上就算是你输入的数据是合法的，Blur还是要运行一次，要避免这个重复我们可以先给域制定一个数据，当用户修改了这个数据以后才执行，这就是Change事件的工作了.例如我们要在用户改变了数据只后才检测有效性，我们可以同过下面的方法:
＜form＞
＜p＞
请输入你的姓名:
＜input type="text" value="You Name" onChange="xian_shi(this)"＞
请输入你的生日:
＜input type="text" value="You Birthday" onChange="xian_shi(this)"＞
＜/form＞
＜script language="javascript"＞
function xian_shi(text_field){
if(text_field.value==""){
alert("不能为空!")
}
}
＜/script＞
　　如果我们不去改变value=""的值，就不会调用函数xian_shi()。

　　KeyDown,KeyUp,KeyPress处理键盘事件
　　我们使用键盘的时候，也就发生三个过程，按下键，松开键，恢复原样。而KeyDown,KeyUp,KeyPress就是对这三个进行的控制.当我们按下键的时候就引发KeyDown事件,松开键的时候引发KeyUp事件，当我们完成按下键和松开键的全过程，使按键恢复原状的时候，就引发了KeyPress事件.相信不用做太过解释你就可以理解了~下面我就举个例子：
＜form＞
看看你的浏览器的状态栏:
＜input type="text" onKeyDown="window.status='你按下了一个键'" onKeyUp="window.status='你又松开了这个键'"＞
＜/form＞

　　今天的最后我们来看看部分关于鼠标事件的处理

　　Click点击事件处理
　　之前我们已经运用了很多次~相信你也不会陌生了吧,这里我就不在多说了，大家可以看看前面的例子.

　　DbClick双击事件处理
　　和单击一样，鼠标双击后引发的事件，在WEB上双击是个不怎么习惯的用法,所以我们也没有必要做过多的讨论，只是要注意，Click和Dbclick不可以同时作用在一个对象上，脚本回自动截取第一次点击调用Click事件。

　　MouseDown和MouseUp事件处理
　　和键盘事件比较一下我们就可以联想到这是鼠标键按下和松开引发的事件，我们可以把这两个时间到套到前面的例子中就一目了然了，因此在这里也就不在做过多解释.在IE中鼠标事件处理的先后次序是MouseDown,MouseUp,Click,MouseUp,DbClick.

　　接下来我们就来看看在网络上比较常见的禁止右键菜单的方法吧。
相信你也遇到过一些禁止右键弹出菜单的站点吧，其中我们运用到几个对象的属性，这里我就不做过多的解释了，在以后我们来慢慢了解.

＜script language="javascript"＞
document.onmousedown=mouse_down
function mouse_down(){
var right_mouse="欢迎光临H.S Workshop"
if(event.button==2　　event.button==3){
alert(right_mouse)
return false
}
}
＜/script＞

　　这里我们主要是针对IE来说的，需要解释的一部分是event.button==2　　event.button==3,为什么是数字呢？因为在IE4之后，按钮代码存放在event对象的button属性中，以数字的形式出现.有七种可能值:

0：什么键都没按；
1：左键；
2：右键；
3：左键和右键；
4：中间键；
5：左键和中间键；
6：右键和中间键；
7：所有三个键。

　　所以我们给出event.button==2　　event.button==3,让计算机来判断用户按下了哪个键。

作者：24CG  来源：eNet网络学院 ( 责任编辑:7dspace )

【收藏此页】【打印】【关闭】