JS的事件处理程序

JS高级的事件处理程序分类

最近看js高级程序设计3这本书，对于一些只是做一下简单总结

1、HTML事件处理程序

<input type="button" value="Echo Username" onclick="alert(username.value)">

2、DOM0级事件处理程序

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

3、DOM2级事件处理程序

//addEventListener传入三个参数，分别是要处理的事件名、作为事件处理程序的函数、一个布尔值（true 表示在捕获阶段调用事件处理程序；false 表示在冒泡阶段调用事件处理程序）
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
//对应的删除操作
btn.removeEventListener("click", handler, false);

4、IE事件处理程序

//需要传递两个参数，分别是事件处理程序名称、事件处理程序函数
//注意：IE8及之前更早版本只支持事件冒泡，通过attachEvent添加的事件处理程序都会被添加到冒泡阶段
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
//对应的删除操作detachEvent()

它与DOM0级区别是在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行，this指向的是当前元素；而使用attachEvent方法，事件处理程序会在全局作用域下运行，this指向window

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;
        }
       }
     };