addEventListener-捕获阶段-冒泡阶段

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

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

       

点我


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标准的浏览器事件是:捕获事件和冒泡事件。

       

        对于这段程序,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

你可能感兴趣的:(addEventListener-捕获阶段-冒泡阶段)