addEventListener's phase and sequence
<html>
<head><title> addEventListener Capturing_phase and Bubbling_phase and At_target </title></head>
<body>
<div id="a1">
<div id="a2"> <input type="button" name="input1" id="i1" value="click here"> </div>
</div>
<script type="text/javascript" charset="utf-8">
function doc(event) {
alert("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', doc, true);
a2.addEventListener('click', doc, false);
i1.addEventListener('click', doc, false);
</script>
</body>
</html>
addEventListener的第3个参数是指在capturing_phase是否捕获此动作，因此上面会按"a1->i1->a2"的顺序弹出提示，这个顺序与dom文档节点顺序和addEventListener第3个参数有关，与javascript代码中的addEventListener的顺序无关。
要在事件流的所有阶段侦听某一事件，您必须调用 addEventListener() 两次，第一次调用时将 useCapture 设置为 true，第二次调用时将 useCapture 设置为 false。如：
a1.addEventListener('click', doc, false);
此时在capturing phase和bubbling phase都会有a1的事件提示。
No comments :
Post a Comment