JavaScript之事件处理(监听)函数

事件是用户和浏览器自身进行的特定行为。这些事件都有自己的名字，如click,，load，mouseover。用于响应某个事件而调用的函数称为事件处理函数，或者DOM称之为事件监听函数。事件处理函数有两种分配方式：在Jav aScript中或者在HTML 中。

如果在JavaScript中分配事件处理函数，则需要首先获得要处理的对象的引用，然后将函数赋值给对应的事件处理函数属性，像这样：

var oDiv=document.getElementById(“div1”);

oDiv.onclick=function(){

alert(“I was clicked”);

};

用这个分配方法，事件处理函数名称必须小写，才能正确响应事件。

如果在HTML中分配事件处理函数，则只要在HTML标签中添加事件处理函数的特性，并在其中包含合适的脚本作为特性值就可以了，如下：

用这种方法，事件处理函数的大小写都可以，所以onclick等同于onClick、OnClick或ONCLICK（建议使用标准的XHTML 代码，则事件处理函数应该全部用小写定义）。

这两个方法在当前所有流行的浏览器都可使用，但传统的做法能为每个可用事件分配多个事件处理函数。于是，IE包含了自己独有的方法，而DOM却规定了另一个方法。

（一）IE

在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。顾名思义，attachEv ent()用来给一个事件附加事件处理函数，而detachEvent()用来将事件处理函数分享出来。每个方法都有两个参数：要分配的事件处理函数的名字及一个函数。

[object].attachEvent(“name_of_event_handler”,fnHandler);

[object].dettachEvent(“name_of_event_handler”,fnHandler);

在attachEvent()中，函数被作为事件处理函数添加，detachEvent()在事件处理函数列表中查找制定的函数，并移除它。例如：

var fnClick1=function(){

alert(“Clicked”);

};

var fnClick2=function(){

alert(“Also Clicked”);

};

var oDiv=document.getElementById(“div”);

oDiv.attachEvent(“onclick”,fnClick1); //添加事件

// oDiv.onclick=fnClick1; //用传统的JavaScrip t方法来添加事件

oDiv.attachEvent(“onclick”,fnClick2); //添加事件

oDiv.detachEvent(“onclick”,fnClick); //移除事件

上面的例子表明，可以为一个对象添加多个事件处理函数，它是按照添加它们的顺序进行调用的。传统方法上对事件处理函数的赋值其实被看成另一种attachEvent()的调用。上例先显示Clicked，接着显示Also Clicked。

（二）DOM

DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数，与IE不同，这些方法需要三个参数：事件名称，要分配的函数和处理函数用于冒泡阶段还是捕获阶段。如果事件处理函数是用于捕获阶段，第三个参数为true；用于冒泡阶段，则为false。下面是语法：

[object].addEventListener(“name_of_event”,fnHandler,bCapture);

[object].removeEventListener(“name_of_event”,fnHandler,bCapture);

var fnClick1=function(){

alert(“Clicked”);

};

var fnClick2=function(){

alert(“Also Clicked”);

};

var oDiv=document.getElementById(“div”);

oDiv.addEventListener(“click”,fnClick1,false); //添加事件

oDiv.addEventListener(“click”,fnClick2,false); //添加事件

oDiv.removeEventListener(“click”,fnClick1,false); //移除事件

oDiv.removeEventListener(“click”,fnClick2,true); //无法移除事件，因为没有指明捕获阶段

与IE一样，也可以为一个对象添加多个事件处理函数。显示效果是一样的。

如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventlistener()中指明是捕获阶段，才能正确地将这个事件处理函数删除。

如果使用传统方法直接给事件处理函数属性赋值，事件处理函数将被添加到事件的冒泡阶段。

直接赋值的一个很重要的不同点是，后续对事件处理函数的赋值将清除前面的赋值：

oDiv.onclick=fnClick;

oDiv.onclick=fnDifferentClick;

起初fnClick被赋给onclick事件处理函数，然后又被fnDifferentClick替换了。