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

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

　　　

    Click Me

• 代码一：
  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.