DOM事件传播及冒泡

DOM事件流

历史原因

• 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
• 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
  然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段

• 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
• 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
• 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

设置捕获阶段就触发事件

• 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
• 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
• IE8及以下的浏览器中没有捕获阶段

如下图所示：

事件捕获

addEventListener可以捕获事件：

    box1.addEventListener("click", function () {
   
        alert("捕获 box3");
    }, true);

上面的方法中，参数为true，代表事件在捕获阶段执行。

代码演示：

    //参数为true，代表事件在「捕获」阶段触发；参数为false或者不写参数，代表事件在「冒泡」阶段触发
    box3.addEventListener("click", function () {
   
        alert("捕获 child");
    }, true);

    box2.addEventListener("click", function () {
   
        alert("捕获 father");
    }, true);

    box1.addEventListener("click", function () {
   
        alert("捕获 grandfather");
    }, true);

    document.addEventListener("click", function () {
   
        alert("捕获 body");
    }, true);

效果演示：

（如果上面的图片打不开，请点击：http://img.smyhvae.com/20180204_1101.gif）