javascript事件简介

一、将函数与对象和事件挂钩的方式

1. HTML方式（行内方式）

为元素添加事件处理属性，将函数或代码作为事件处理属性的值。

特点：

1. 相关函数或代码就是事件处理器；
2. 那些元素可以有事件处理属性，可以有那些事件处理属性都是个别定义的；

3. 类似于元素的style属性；
4. 属性名一般建议小写；

5. 有时差问题；

6. 破坏了结构与行为分离原则，不再推荐。

2. DOM0方式（传统模型）

每个元素对应的DOM对象拥有特定的事件处理属性，可以将事件处理器赋给这些属性。如：

document.getElementById("button1").οnclick= function(){

alert("hoho,agoodapple!");                

};                

特点：

1. 兼容性最好的方案；

2. 事件处理器容易被覆盖；

3. 难以为同一事件多次赋予不同的事件处理器；

4. 可以通过为属性赋值null来取消所有的事件处理器。

3. IE高级模型

attachEvent()和detachEvent()，接收相同的两个参数：事件处理器名称和事件处理器。如：

btn.attachEvent("onclick",function(){ alert("hoho,a good apple!"); } );

特点：

1. 添加事件处理程序在IE9中以顺序触发，IE8中以逆序触发；

2. 不能移除匿名函数。

4. W3C模型

addEventListener()和removeEventListener()，接收三个参数：事件名称、事件处理器和布尔值。布尔值用于指示捕获（true）还是冒泡（false）阶段处理事件。如：

btn.addEventListener("click",function(){ alert("hoho,a good apple!");},false);

特点：

1. 添加事件处理程序以顺序触发；

2. 不能移除匿名函数；

3. IE9也能支持W3C模型。

 

二、不同方式的对比

1. 事件流
   1. HTML和DOM0方式直接将事件分派给发生事件的文档元素；
   2. IE高级模型仅支持冒泡；
   3. W3C模型同时支持捕获和冒泡；
   4. 为兼容期间，主要采用冒泡。

2. 取消事件
   1. DOM0方式可以方便地取消所有事件；
   2. IE高级模型和W3C模型无法取消所有事件。

3. this问题
   1. HTML和DOM0方式和W3C模型都将事件处理器看作注册元素的方法，this指向注册元素；
   2. IE高级模型将事件处理器看作全局对象的方法，this指向全局元素。

4. 作用域问题
   1. HTML和DOM0方式中事件处理器具有从注册元素起到全局元素的延长作用域；
   2. IE高级模型具有全局作用域。