事件处理程序

1.HTML事件处理程序

(1)方式：

<input type="buttton" value="click me" onclick="alert('clicked');" />

或者

<input type="buttton" value="click me" onclick="showMessage()" />

function showMessage(){    alert('Hello World!');}

(2)缺点：HTML与JS代码紧密耦合，如果要更换事件程序就需要更改HTML和JS

2.DOM0级事件处理程序

(1)方式：

var bBtn=document.getElementById("myBtn");       btn.onclick=function(){       alert("clicked");}

(2)删除事件处理程序：

bBtn.onclick=null;

3.DOM2事件处理程序

(1)DOM2级定义了两个方法：addEventListener()、removeEventListener()

(2)这两个方法包含三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是true表示在捕获阶段调用事件处理程序，如果是false表示     在冒泡阶段调用事件处理程序。

(3)方法：

var bBtn=document.getElementById("myBtn");bBtn.addEventListener("click",function(){alert(this.id);},false);

(4)移除事件：通过addEventListener()添加的事件只能通过removeEventListener()移除，这就意味着匿名函数将无法移除

var bBtn=document.getElementById("myBtn");bBtn.addEventListener("click",function(){alert(this.id);},false);bBtn.removeEventListener("click",function(){//无效alert(this.id);},false);

正确方式：

function showMessage(){<span style="white-space:pre"></span>alert(this.id);}bBtn.addEventListener("click",showMessage,false);bBtn.removeEventListener("click",showMessage,false);

4.IE事件处理程序

(1)IE也定义了两个方法：attachEvent()、detachEvent()

(2)这两个方法默认包含两个参数：事件处理程序名称和事件处理程序函数，由于IE8及更早的版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

(3)方式：

var bBtn=document.getElementById("myBtn");    bBtn.attachEvent("onclick",function(){    alert(this.id);});

第一参数是"onclick"，而非"click"

(4)移除事件：

function showMessage(){    alert(this.id);}bBtn.detachEvent("onclick",showMessage);

5.跨浏览器事件处理程序

var EventUtil={addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent("on"+type,handler)}else{element["on"+type]=handler;}},removeHandler:function(element,type,handler){if(element.removeEventListener){element.removeEventListener(type,handler,false);}else if(element.detachEvent){element.detachEvent("on"+type,handler)}else{element["on"+type]=null;}};