addEventListener-捕获阶段-冒泡阶段

从阿里2018笔试题讲  addEventListener-捕获阶段-冒泡阶段

    下面代码中，当点击点我时，输出的正确结果是：

<div id="div2">

        <div id="div1">点我</div>

</div>

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

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

div1.addEventListener('click', function(event){console.log("A");}, true);

div2.addEventListener('click', function(event){console.log("B");});

div1.addEventListener('click', function(event){console.log("C");}, false);

div2.addEventListener('click', function(event){console.log("D");}, true);

    A、A B C D 

    B、D A C B 

    C、A D B C 

    D、D C A B 

    E、B D A C 

---

首先看看addEventListener [参考文献1]

     addEventListener() 方法用于向指定元素添加事件句柄，可使用removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。语法如下：

element.addEventListener(event,function,useCapture)；

      三个参数中前两个是必须的，最后一个可选。event参数指定事件名（不用on前缀），如“click”；function参数指定事件触发时执行的函数；useCapture参数为布尔值，指定事件是否在捕获或冒泡阶段执行，默认为false（事件句柄在冒泡阶段执行），true表示事件句柄在捕获阶段执行。

---

再看看捕获阶段和冒泡阶段 [参考文献2]

     DOM标准的浏览器事件是：捕获事件和冒泡事件。

<div id="ancestor">

        <button id="child">Open the console and click me</button>

</div>

        对于这段程序，DOM事件模型的捕获和冒泡过程如下：

        捕获事件过程：{（助记：要先从系统到事件的捕获，顶到底，父到子）

1、Window

2、Document

3、Body

4、Div#ancestor

5、Button#child

}

        冒泡事件过程：{（助记：捕获后事件要汇报给系统，底上浮到顶，子告诉父）

6、Div#ancestor

7、Body

8、Document

9、Window

}

        当开发者在一个元素上注册了事件后，这个事件的响应顺序是从window(最顶层)开始一级一级的向下传播，然后到了该元素后事件捕获过程结束，事件开如冒泡，一级一级向父层元素冒泡（请注意第6步）。

        帮助记忆，总结一句就是，从顶到底找事件，从底到顶汇报事件。

        当然，开发者可以很轻松的决定DOM标准的浏览器中的事件需要在哪个传播过程触发，对于DOM事件模型，就通过addEventListener()方法进行事件注册。

        注意：IE内核浏览器的事件模型不同于DOM事件模型，IE内核的事件模型跳过了事件捕获过程，只有事件冒泡过程，事件句柄的触发顺序是从ChildNode到ParentNode，从底到顶：

1、Button#child;

2、div#ancestor;

3、Body;

4、Document

        另外，IE内核浏览器的事件注册不用addEventListener()方法，而是用attachEvent()方法。

---

最后讲讲阿里笔试题（文章开头的题目）

       事件注册时用的addEventListener() 方法，可见这是一个DOM事件模型，包括了捕获过程和冒泡过程。注册的四个事件中，第一个A和第四个D的useCapture参数为true，在捕获阶段执行；中间两个事件BC的useCapture参数，一个是没有设置、故默认为false，一个是手动设置为false，反正都是false，在冒泡阶段执行。

       我们知道，DOM事件模型先执行捕获阶段的事件：

1、Window

2、Document

3、Body

4、父Div(#div2)，执行div2.addEventListener('click', function(event){console.log("D");}, true);

5、子Div(#div1)，执行div1.addEventListener('click', function(event){console.log("A");}, true);

      再执行冒泡阶段的事件：

6、子Div(#div1)，执行div1.addEventListener('click', function(event){console.log("C");}, false);

7、父Div(#div2), 执行div2.addEventListener('click', function(event){console.log("B");});

8、Body

9、Document

10、Window

}

所以选择B、DACB

参考文献：

[1] 《HTML DOMaddEventListener()方法》. http://www.runoob.com/jsref/met-element-addeventlistener.html

[2]《js事件的捕获和冒泡阶段》. http://www.cnblogs.com/liuyitian/p/4460194.html