addeventlistener's phase and sequence

html

<div id="a1">
  <div id="a2"><input type="button" name="input1" id="i1" value="click here"></div>
</div>

javascript

function log(event) {
    console.log("currentTarget=" + event.currentTarget.id + "; target=" + event.target + "; eventPhase=" + event.eventPhase);
}
var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
var i1 = document.getElementById("i1");
a1.addEventListener('click', log, true);
a2.addEventListener('click', log, false);
i1.addEventListener('click', log, false);

addEventListener的第3个参数是指在capturing_phase是否捕获此动作，因此上面会按"a1->i1->a2"的顺序弹出提示，这个顺序与dom文档节点顺序和addEventListener第3个参数有关，与javascript代码中的addEventListener的顺序无关。

要在事件流的所有阶段侦听某一事件，您必须调用addEventListener两次，第一次调用时将useCapture设置为true，第二次调用时将useCapture设置为false。如：

a1.addEventListener('click', log, false);

此时在capturing phase和bubbling phase都会有a1的事件提示。