事件处理程序
- 事件就是用户或浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序。
1、HTML 事件处理程序
- 某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML 特性来指定。
<script type="text/javascript">
function showMessage(){
alert("Hello world!");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
<!-- 输出 "click" -->
<input type="button" value="Click Me" onclick="alert(event.type)">
<!-- 输出 "Click Me" -->
<input type="button" value="Click Me" onclick="alert(this.value)">
- 通过HTML 指定事件处理程序的最后一个缺点是HTML 与JavaScript 代码紧密耦合。
2、DOM0 级事件处理程序
- 通过JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
- 每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
- 使用DOM0 级方法指定的事件处理程序被认为是元素的方法，程序中的this引用当前元素。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); //"myBtn"
};
- 删除通过DOM0级方法指定的事件处理程序，可以将事件处理程序属性的值设置为null
btn.onclick = null; //删除事件处理程序
3、DOM2 级事件处理程序
- “DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。
- 所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
- 使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
//这两个事件处理程序会按照添加它们的顺序触发
- 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；
- 移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
//这里省略了其他代码
btn.removeEventListener("click", function(){ //没有用！
alert(this.id);
}, false);
- 虽然调用remove-EventListener()时看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效！
- 大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。
- IE9、Firefox、Safari、Chrome 和Opera 支持DOM2 级事件处理程序。
4、IE事件处理程序
- IE 实现了与DOM 中类似的两个方法：attachEvent()和detachEvent()。
- 这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
- 在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。
- 在使用DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行。
- 在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});
- 与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
btn.attachEvent("onclick", function(){
alert("Hello world!");
});
//这两个事件处理程序以相反的顺序被触发
- 使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。只要能够将对相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序。
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
//这里省略了其他代码
btn.detachEvent("onclick", handler);
- 支持IE 事件处理程序的浏览器有IE 和Opera。
5、跨浏览器的事件处理程序
- 要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。
- 第一个要创建的方法是addHandler()，它的职责是视情况分别使用DOM0 级方法、DOM2 级方法或IE 方法来添加事件。
- addHandler()方法接受3 个参数：要操作的元素、事件名称和事件处理程序函数。
- 与addHandler()对应的方法是removeHandler()，它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0 级方法。
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;
}
}
};
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler);
好好学习
