js--事件--事件处理程序

关于事件写了一系列文章

1.事件流（事件捕获和事件冒泡）

http://blog.csdn.net/github_34514750/article/details/53067077

2.事件处理程序

本文介绍事件处理程序

3.事件对象

http://blog.csdn.net/github_34514750/article/details/53084014

4.通用的事件侦听器函数

http://blog.csdn.net/github_34514750/article/details/53084034

5.事件循环（event loop）

http://blog.csdn.net/github_34514750/article/details/53067106

6.事件代理（(event delegation）

http://blog.csdn.net/github_34514750/article/details/53067133

1.事件处理程序(HTML事件处理程序，DOM0事件处理程序，DOM2事件处理程序，IE事件处理程序，跨浏览器事件处理程序)

在以下几点进行对比和了解：

1.各种事件处理程序的添加和删除

2.在捕获阶段或者是冒泡阶段执行事件处理程序

3.是否可以添加多个事件处理程序

HTML事件处理程序

DOM0级事件处理程序

1.=null就是事件的删除

2.这种事件处理程序会在事件流的冒泡阶段被处理

3.DOM0级对每个事件只支持一个事件处理程序

// 添加事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function() {
alert(this.id); //"myBtn"
};
//删除事件处理程序
btn.onclick = null;

DOM2级事件处理程序

DOM2级方法添加事件处理程序主要好处是可以添加多个事件处理程序，并按照他们的顺序触发

var btn = document.getElementById("myBtn");

btn.addEventListener("click",function() {
alert(this.id);
},false);
btn.addEventListener("click",function() {
alert("Hello World!");
},false);

attention:通过addEventListener和removeEventListener来添加和删除事件处理程序，但是移除和添加处理程序的时候参数必须相同，这意味着addEventListener添加的匿名函数将无法移除

//错误的写法

var btn = document.getElementById("myBtn");

btn.addEventListener("click",function() {
alert(this.id);
},false);

// 这个和addEventListener的函数完全不是同一个函数，匿名函数无法移除
btn.removeEventListener("click",function() {
alert(this.id);
},false);

//正确的写法

var btn = document.getElementById("myBtn"),
handler = function() {
alert(this.id);
};

btn.addEventListener("click",handler,false);

// 这样就删除掉了
btn.removeEventListener("click",handler,false);

IE事件处理程序

1.增加删除事件处理程序attachEvent()和detachEvent()

2.IE只支持冒泡，因此由attachEvent()添加的事件处理程序会被添加到冒泡阶段

3.attachEvent()方法也可以为一个元素添加多个事件处理程序

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert("Clicked");
});

跨浏览器事件处理程序

var EventUtil = {
//根据情况分别使用dom2 || IE || dom0方式 来添加事件
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;
}
},
//根据情况分别使用dom2 || IE || dom0方式 来删除事件
removeHandler:function(element,type,handler){
if(element.removeHandler) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent("on" + type,handler);
} else {
element["on" + type] = null;
}
}
}

var btn = document.getElementById("myBtn"),
handler = function () {
alert("Clicked");
};

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);