《JavaScript高级程序设计》读书笔记13.2事件处理程序

事件就是用户或浏览器自身执行的某种动作
响应某个事件的函数叫做事件处理程序（或事件侦听器)
事件处理程序的名字以“on”开头

1.HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML==特性==来指定。
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。
指定事件处理程序的优势：
- 会创建一个封装着元素属性值的函数。这个函数有一个局部变量event，就是事件对象（自己）
- 函数内部，this值等于事件的目标元素。
- 作用域扩展
指定事件处理程序有两个缺点：
- 时差问题
- HTML与JS代码紧密耦合。

2.DOM0级事件处理程序

通过JS指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

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

删除方法
btn.onclick=null;

事件处理程序是元素的方法，在元素作用域中运行，this引用当前元素。
在事件流的冒泡阶段被处理。

3. DOM2级事件处理程序

两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener()和removeEventListener().
可以添加多个事件处理程序，且依次执行。
如果传入匿名函数，则无法删除
IE9+

4. IE事件处理程序

两个方法：
attachEvent()和detachEvent()。添加到冒泡阶段。
与DOM0级事件处理程序差别——作用域。attachEvent()方法是全局作用域。
可以添加多个事件处理程序，倒序执行。
只支持IE和Opera。

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

创建EventUtil对象，定义两个方法addHandler()和removeHandler(),接收3个参数：要操作的元素、事件名称和事件处理程序函数

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