JavaScript的事件处理程序

HTML中的事件处理程序

对于支持事件的HTML标签，可以直接在标签中定义。

<button onclick="alert('button')">click</button>

而且如果在onclick函数中加入console.log(this)，可以看出输出了整个标签本身。

故在HTML事件处理程序中this指向标签本身。

但是这种事件处理程序与html代码耦合紧密，而且不方便进行多个事件处理程序的操作。

DOM0级事件处理程序

PS:其实DOM 0级并非像DOM 1级那样作为统一的规范，人们习惯于把DOM 1级规范之前的DOM称为DOM 0级。

DOM0级事件处理程序通过将一个事件处理函数赋值给标签的事件属性来实现事件处理程序的定义。

<button>click</button>

btn = document.querySelector('button');
btn.onclick=function(event){
    alert('button');
}

事件处理函数中的this指向元素本身，此处即button。

这种方式解决了耦合的问题，但是对于多事件处理程序的操作依然很不便捷。

DOM 2级事件处理程序

DOM2级事件中定义了两个函数用于添加和移除事件处理程序。分别是

addEventListener(event,function,flag)

removeEventListener(event,function,flag)

其中event指事件，如“click”；function指执行的函数，它有一个默认参数指向事件对象；flag是一个可选参数，用来标识是否在捕获阶段进行函数调用，默认为false，即在冒泡阶段进行调用。

<button>click</button>

btn = document.querySelector('button');
btn.addEventListener("click",function(event){
    alert('button');
},false);

还可以使用removeEventListener进行事件的移除，不过对于使用匿名函数做function参数的事件处理程序无法移除（如上述），即使在function参数处写了完全相同的匿名函数也不行。

<button>click</button>

btn = document.querySelector('button');
var click_func = function(event){
    alert('button');
};
btn.addEventListener("click",click_func,false);
btn.removeEventListener("click",click_func,false);

使用DOM 2级事件处理程序可以方便的对同一元素的多个事件处理程序进行操作，而且添加和移除也很方便。

addEventListener中的this指向元素本身。

IE中的事件处理程序

对于IE8及更早的IE浏览器，使用

attachEvent(eventWithOn,function)代替addEventListener

detachEvent(eventWithOn,function)代替removeEventListener

这里并没有原来的第三个flag参数，这是因为早期的IE浏览器并不支持事件捕获，事件流默认为冒泡。

同样的，在使用这两种方法时也会有一个默认的参数（指向事件对象）传入function。

注意：在使用addEventListener为同一元素添加多个事件处理程序时（假设均为click事件），点击事件触发时会按照添加的顺序依次调用函数；但是attachEvent恰恰相反，会按照与添加顺序相反的次序调用函数。

attachEvent中添加的事件处理程序会在全局作用域中运行，因此this = window。