JavaScript--6.事件处理

七、JavaScript中事件处理

1.事件与事件处理概述

(1)事件与事件名称

    事件是一些可以通过脚本响应的页面动作。当用户按下鼠标键或者提交一个表单，甚至在页面上移动鼠标时，事件就会出现。事件处理是一段JavaScript代码，总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分关联的事件发生时，事件处理器就会被调用。

    绝大多数事件的命名都是描述性的，很容易理解。例如click、submit、mouseover等，通过名称就可以猜测其含义。但也有少数事件的名称不易理解，例如blur（英文的字面意思为“模糊”），表示一个域或者一个表单失去焦点。通常，事件处理器的命名原则是，在事件名称前加上前缀on。例如，对于click事件，其处理器名为onClick。

 

(2)JavaScript的常用事件

 

 

 

(3)事件处理程序的调用

 

在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序。指定方式主要有以下两种：

1．在JavaScript中调用

    在JavaScript中调用事件处理程序，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。例如下面的代码：

<input id="save"name="bt_save" type="button" value="保存">

 <script language="javascript">

         varb_save=document.getElementById("save");

         b_save.οnclick=function(){

                   alert("单击了保存按钮");

         }

 </script>

注意：

    在上面的代码中，一定要将<inputid="save" name="bt_save" type="button"value="保存">放在JavaScript代码的上方，否则将弹出“'b_save'为空或不是对象”的错误提示。

 

2．在HTML中调用

    在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或是函数名即可。例如：

<input name="bt_save"type="button" value="保存"οnclick="alert('单击了保存按钮');">

    在页面中添加如上代码，同样会在页面中显示“保存”按钮，当单击该按钮时，将弹出“单击了保存按钮”对话框。

 

2.DOM事件模型

 

(1)事件流

    DOM（文档对象模型）结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

 

(2)主流浏览器的事件模型

捕获型事件(Capturing)：

         NetscapeNavigator的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素。

冒泡型事件(Bubbling)：

         从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素。

 

(3)事件对象

    在IE浏览器中事件对象是window对象的一个属性event，并且event对象只能在事件发生时候被访问，所有事件处理完后，该对象就消失了。而标准的DOM中规定event必须作为唯一的参数传给事件处理函数。故为了实现兼容性，通常采用下面的方法：

function someHandle(event) {

if(window.event)

event=window.event；

}

    在IE中，事件的对象包含在event的srcElement属性中，而在标准的DOM浏览器中，对象包含在target属性中。为了处理两种浏览器兼容性，举例如下：

function handle(oEvent){

if(window.event) oEvent =window.event;     //处理兼容性，获得事件对象

var oTarget;

if(oEvent.srcElement)                            //处理兼容性，获取事件目标

oTarget = oEvent.srcElement;

else

oTarget = oEvent.target;

alert(oTarget.tagName);                                //弹出目标的标记名称

}

window.onload = function(){

var oImg =document.getElementsByTagName(“img”)[0];

oImg.onclick = handle;

}

 

(4)注册与移除事件监听器

1．IE下注册多个事件监听器与移除监听器方法

IE浏览器中HTML元素有个attachEvent方法允许外界注册该元素多个事件监听器，例如：element.attachEvent(‘onclick’, observer);

注意：在IE7中注册多个事件时，后加入的函数先被调用。

    如果要移除先前注册的事件的监听器，调用element的detachEvent方法即可，参数相同，例如：element.detachEvent(‘onclick’, observer);

2．DOM标准下注册多个事件监听器与移除监听器方法

实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同，它通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。

element.addEventListener(‘click’, observer,useCapture);

addEventListener方法接受三个参数。第一个参数是事件名称，值得注意的是，这里事件名称与IE的不同，事件名称是没‘on’开头的；第二个参数observer是回调处理函数；第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，默认true为捕获阶段。

注意：

    在Firefox中注册多个事件时候，先添加的监听事件先被调用。标准的DOM监听函数是严格按顺序执行的。

移除已注册的事件监听器调用element的removeEventListener即可，参数不变。

element.removeEventListener(‘click’,observer, useCapture);

3．直接在DOM节点上加事件

（1）如何取消浏览器事件的传递与事件传递后浏览器的默认处理

取消事件传递是指，停止捕获型事件或冒泡型事件的进一步传递。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

事件传递后的默认处理是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。

（2）取消浏览器的事件传递:

在IE下，通过设置event对象的cancelBubble为true即可。

function someHandle() {

window.event.cancelBubble = true;

}

DOM标准通过调用event对象的stopPropagation()方法即可。

function someHandle(event) {

event.stopPropagation();

}

因些，跨浏览器的停止事件传递的方法是：

function someHandle(event) {

event = event || window.event;

if(event.stopPropagation)

event.stopPropagation();

else event.cancelBubble = true;

}

（3）取消事件传递后的默认处理

在IE下，通过设置event对象的returnValue为false即可。

function someHandle() {

window.event.returnValue = false;

}

DOM标准通过调用event对象的preventDefault()方法即可。

function someHandle(event) {

event.preventDefault();

}

因些，跨浏览器的取消事件传递后的默认处理方法是：

function someHandle(event) {

event = event || window.event;

if(event.preventDefault)

event.preventDefault();

else event.returnValue = false;

} 

3.鼠标键盘事件

(1)鼠标的单击事件

单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。

    单击事件一般应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象，Button对象一般只会用到onclick事件处理程序，因为该对象不能从用户那里得到任何信息，如果没有onclick事件处理程序，按钮对象将不会有任何作用。

注意：

    在使用对象的单击事件时，如果在对象上按下鼠标键，然后移动鼠标到对象外再松开鼠标，单击事件无效，单击事件必须在对象上按下松开后，才会执行单击事件的处理程序。

(2)鼠标的按下或松开事件

鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。

 

(3)鼠标的移入移出事件

鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在鼠标移出对象上方时触发事件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。

 

(4)鼠标的移动事件

    鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。

 

(5)键盘事件的使用

    键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。Onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。

为了便于读者对键盘上的按键进行操作，下面以表格的形式给出其键码值。

字母和数字键的键码值

数字键盘上按键的键码值

控制键的键码值

如果想要在JavaScript中使用组合键，可以利用event.ctrlKey，event.shiftKey，event.altKey判断是否按下了ctrl键、shift键以及alt键。

 

 

4.面事件

(1)加载与卸载事件

加载事件（onload）是在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件（unload）是在卸载网页时触发相应的事件处理程序，卸载网页是指关闭当前页或从当前页跳转到其他网页中，该事件常被用于在关闭当前页或跳转其他网页时，弹出询问提示框。

在制作网页时，为了便于网页资原的利用，可以在网页加载事件中对网页中的元素进行设置。下面以示例的形式讲解如何在页面中合理利用图片资原。

 

(2)页面大小事件

页面的大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，它主要用于固定浏览器的大小。

 

 

5.表单事件

 

(1)获得焦点与失去焦点事件

获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。

 

(2)失去焦点修改事件

    失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。

 

(3)表单提交与重置事件

表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit），在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。

表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。

下面给出这两个事件的使用格式：

<form name="formname"onReset="return Funname" οnsubmit="return Funname "></form>

   formname：表单名称。

   Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值。

注意：

    如果在onsubmit和onreset事件中调用的是自定义函数名，那么，必须在函数名的前面加return语句，否则，不论在函数中返回的是true，还是false，当前事件所返回的值一律是true值。