事件处理程序

1.HTML事件处理程序

(1)方式：

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

或者

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

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

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

2.DOM0级事件处理程序

(1)方式：

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

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

bBtn.οnclick=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;
			}
	};