JavaScript 的事件处理机制

1. 事件处理模型：冒泡和捕获型

1
2
3
<div id="outer">
    <p id="inner">Click!</p>
</div>

上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个click的处理函数，那么我们怎么才能知道哪一个函数会首先被触发呢？

为了解决这个问题微软和网景提出了两种几乎完全相反的概念。
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议使用事件冒泡模型

网景提出了一种名为事件捕获(event capturing)的事件流。事件从最外层开始发生，直到最具体的元素。

上面例子，在事件捕获的概念下发生click事件的顺序是document -> html -> body -> div -> p

微软提出了一种名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

上面例子，在事件冒泡的概念下发生click事件的顺序是p -> div -> body -> html -> document

任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。

上面例子，在事件捕获的概念下发生click事件的顺序是document -> html -> body -> div -> p -> div -> body -> html -> document

JavaScript中一共有三种事件监听方法：

1.DOM0级事件处理方式

绑定形式：element[’on’ + type] = function(){} or null(删除处理程序)

将一个函数赋值给一个事件处理属性，特点：简单且全部浏览器支持，但是会覆盖绑定。

2.DOM2级事件处理方式

添加事件处理程序和删除事件处理程序的方法：addEventListener，removeEventListener。

绑定形式：element.addEventListener(type, listener, useCapture); // IE6~8不支持

在IE中使用，attachEvent和detachEvent来实现。
绑定形式：element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持

3.DOM3级事件处理方式
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件，例如，UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件。还可以使用createEvent自定义事件。

参数含义

type：事件类型
listener：事件触发后的回调函数
useCapture：是否使用捕获，如果值为true， useCapture 表示用户希望发起捕获。在发起捕获之后，只要Dom子树下发生了该事件类型，都会先被该事件监听器捕获，然后再被派发到Dom子树中的事件监听器中。并且向上冒泡的事件不会触发那些发起捕获的事件监听器。进一步的解释可以查看 DOM Level 3 Events 文档。 useCapture 默认值为false 。
addEventListener是W3C工作组在DOM Level 2开始引入的一个注册事件监听器的方法；而在此之前，传统的事件监听方法是通过element[’on’ + type]的方式来注册的。它们两之间的主要区别是，element[’on’ + type]的方式无法使用事件捕获，并且element[’on’ + type]不支持对同一个元素的同一个事件注册多个事件监听器。如下面的例子所示，元素被点击后只会输出1，而不会输出0和1.
1 2
element.onclick = function(){ console.log(0); } element.onclick = function(){ console.log(1); }

然而addEventListener方法在IE6~8的浏览器中不被支持。那么在低版本的IE中怎么来为同一个事件注册多个事件监听器呢？原来IE从IE5.0系列开始就引入了attachEvent()方法来支持这一特性。但遗憾的是该方法也不支持事件捕获。并且从IE 11开始，这个方法已经被弃用。