JS小tips 之 事件处理程序中的三个阶段

理解JS事件处理程序中的三个阶段：捕获阶段、处于目标阶段、事件冒泡阶段

注意：所有图片及代码来自《JavaScript高级程序设计》，为了能用具体的例子加深对三个阶段的理解。

　　　

<html>
<head><title>test for event</title></head>
<body>
    <button id="myBtn">Click Me</button>
</body>
</html>
  • 代码一：
    var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this); //true
    alert(event.target === this);//true
};
document.body.onclick = function(event){
    alert(event.currentTarget === document.body);//true
    alert(this === document.body); // true
    alert(event.target == btn); // true

};

    解释：
    1、currentTarget和this始终指向事件注册的位置，而target指向的是事件发生的对象（此处是按钮）；
    2、显然，在单击按钮后，首先btn的事件触发，然后冒泡到document.body上，此时event.target仍然是btn，this和currentTarget却已经指向document.body了。

  • 代码二：
    var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert("Clicked");
    event.stopPropagation();
};
document.body.onclick = function(event){
    alert("Body clicked"); //不会弹出。
};

    解释：

    stopPropagation()阻止了冒泡或者捕获过程。而document.body有注册在冒泡过程的事件，这个事件不会执行了。

  • 代码三：
    var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.eventPhase); // 2
};
document.body.addEventListener("click", function(event){alert(event.eventPhase);},true);// 1. 注册在捕获阶段
document.body.onclick = function(event){
    alert(event.eventPhase); // 3
};

    解释：

    eventPhase：1--捕获阶段；2--处理阶段；3--冒泡阶段

    addEventListener()第三个参数为true，表示注册在捕获阶段。

    因此警告框显示的顺序应该是1-2-3.

posted @ 2017-11-03 17:33  nebulium  阅读(406)  评论(0)  编辑  收藏  举报