JavaScript之事件处理(监听)函数_H5之家 - 中国HTML5教程资源分享第一站

　　事件是用户和浏览器自身进行的特定行为。这些事件都有自己的名字，如click,，load，mouseover。用于响应某个事件而调用的函数称为事件处理函数，或者DOM称之为事件监听函数。事件处理函数有两种分配方式：在JavaScript中或者在HTML中。
　　如果在JavaScript中分配事件处理函数，则需要首先获得要处理的对象的引用，然后将函数赋值给对应的事件处理函数属性，像这样：
　　var oDiv=document.getElementById(“div1”);
　　oDiv.onclick=function(){
　　　　alert(“I was clicked”);
　　};
　　用这个分配方法，事件处理函数名称必须小写，才能正确响应事件。
　　如果在HTML中分配事件处理函数，则只要在HTML标签中添加事件处理函数的特性，并在其中包含合适的脚本作为特性值就可以了，如下：　　<div onclick=”alert(‘I was clicked’)”></div>
　　用这种方法，事件处理函数的大小写都可以，所以onclick等同于onClick、OnClick或ONCLICK（建议使用标准的XHTML代码，则事件处理函数应该全部用小写定义）。
　　这两个方法在当前所有流行的浏览器都可使用，但传统的做法能为每个可用事件分配多个事件处理函数。于是，IE包含了自己独有的方法，而DOM却规定了另一个方法。
（一） IE
在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。顾名思义，attachEvent()用来给一个事件附加事件处理函数，而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; //用传统的JavaScript方法来添加事件
　　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替换了。