标准事件模型（DOM2级事件模型）是更加强大和灵活的事件处理方式。在标准事件模型中，一个事件共有三个阶段：捕获阶段、处理阶段和冒泡阶段。让我们深入了解标准事件模型的特点和使用方法。

事件捕获阶段、处理阶段和冒泡阶段

事件捕获阶段： 事件从document向下传播到目标元素，检查经过的节点是否绑定了事件监听函数，如果有则执行。事件处理阶段： 事件到达目标元素，触发目标元素的监听函数。事件冒泡阶段： 事件从目标元素冒泡回document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

在标准事件模型中，事件绑定和移除监听函数的方式如下：

addEventListener(eventType, handler, useCapture);

removeEventListener(eventType, handler, useCapture);

标准事件模型的特点：

支持多个事件处理器： 在一个DOM元素上可以绑定多个事件处理器，它们不会相互冲突。

btn.addEventListener('click', showMessage1, false);

btn.addEventListener('click', showMessage2, false);

btn.addEventListener('click', showMessage3, false);

执行时机： useCapture参数设置为true时，在捕获阶段执行监听函数；设置为false时，在冒泡阶段执行监听函数。

通过以下例子，我们可以更好地理解事件处理阶段的执行时机：

<div id='div'>code>

<p id='p'>code>

<span id='span'>点击我！</span>code>

</p >

</div>

设置点击事件：

var div = document.getElementById('div');

var p = document.getElementById('p');

function onClickFn (event) {

var tagName = event.currentTarget.tagName;

var phase = event.eventPhase;

console.log(tagName, phase);

}

div.addEventListener('click', onClickFn, false);

p.addEventListener('click', onClickFn, false);

点击"点击我！"后，输出如下：

P 3

DIV 3

我们可以看到，p和div都在冒泡阶段响应了事件，由于冒泡的特性，内部的p先于外层的div作出了响应。

如果我们将useCapture参数改为true：

div.addEventListener('click', onClickFn, true);

p.addEventListener('click', onClickFn, true);

输出如下：

DIV 1

P 1

两者在捕获阶段响应事件，因此div会先于p作出响应。

IE事件模型