40-事件的传播和事件冒泡

DOM事件流

事件传播的三个阶段是：事件捕获、事件冒泡和目标。

  • 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。

  • 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

  • 事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。

如下图所示：

51-事件的传播和事件冒泡 - 图1

PS：这个概念类似于 Android 里的 touch 事件传递。

事件捕获

addEventListener可以捕获事件：

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

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

代码演示：

  1.     //参数为true，代表事件在「捕获」阶段触发；参数为false或者不写参数，代表事件在「冒泡」阶段触发
  2.     box3.addEventListener("click", function () {
  3.         alert("捕获 child");
  4.     }, true);
  6.     box2.addEventListener("click", function () {
  7.         alert("捕获 father");
  8.     }, true);
  10.     box1.addEventListener("click", function () {
  11.         alert("捕获 grandfather");
  12.     }, true);
  14.     document.addEventListener("click", function () {
  15.         alert("捕获 body");
  16.     }, true);

效果演示：

51-事件的传播和事件冒泡 - 图2

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

重点：捕获阶段，事件依次传递的顺序是：window —> document —> html—> body —> 父元素、子元素、目标元素。

这几个元素在事件捕获阶段的完整写法是：

  1.     window.addEventListener("click", function () {
  2.         alert("捕获 window");
  3.     }, true);
  5.     document.addEventListener("click", function () {
  6.         alert("捕获 document");
  7.     }, true);
  9.     document.documentElement.addEventListener("click", function () {
  10.         alert("捕获 html");
  11.     }, true);
  13.     document.body.addEventListener("click", function () {
  14.         alert("捕获 body");
  15.     }, true);
  17.     fatherBox.addEventListener("click", function () {
  18.         alert("捕获 father");
  19.     }, true);
  21.     childBox.addEventListener("click", function () {
  22.         alert("捕获 child");
  23.     }, true);

说明：

（1）第一个接收到事件的对象是 window（有人会说body，有人会说html，这都是错误的）。

（2）JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩是最先获取到事件的。

补充一个知识点：

在 js中：

  • 如果想获取 html节点，方法是document.documentElement。

  • 如果想获取 body 节点，方法是：document.body。

二者不要混淆了。

事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

代码演示：

  1.     //事件冒泡
  2.     box3.onclick = function () {
  3.         alert("child");
  4.     }
  6.     box2.onclick = function () {
  7.         alert("father");
  8.     }
  10.     box1.onclick = function () {
  11.         alert("grandfather");
  12.     }
  14.     document.onclick = function () {
  15.         alert("body");
  16.     }

51-事件的传播和事件冒泡 - 图3

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

上图显示，当我点击子元素 box3 的时候，它的父元素box2、box1、body都依次被触发了。即使我改变代码的顺序，也不会影响效果的顺序。

当然，上面的代码中，我们用 addEventListener 这种 DOM2的写法也是可以的，但是第三个参数要写 false，或者不写。

冒泡顺序：

一般的浏览器: （除IE6.0之外的浏览器）

  • div -> body -> html -> document -> window

IE6.0：

  • div -> body -> html -> document

不是所有的事件都能冒泡

以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。

我们检查一个元素是否会冒泡，可以通过事件的以下参数：

  1.     event.bubbles

如果返回值为true，说明该事件会冒泡；反之则相反。

举例：

  1.     box1.onclick = function (event) {
  2.         alert("冒泡 child");
  4.         event = event || window.event;
  5.         console.log(event.bubbles); //打印结果：true。说明 onclick 事件是可以冒泡的
  6.     }

阻止冒泡

大部分情况下，冒泡都是有益的。当然，如果你想阻止冒泡，也是可以的。可以按下面的方法阻止冒泡。

阻止冒泡的方法

w3c的方法：（火狐、谷歌、IE11）

  1.     event.stopPropagation();

IE10以下则是：

  1. event.cancelBubble = true

兼容代码如下：

  1.    box3.onclick = function (event) {
  3.         alert("child");
  5.         //阻止冒泡
  6.         event = event || window.event;
  8.         if (event && event.stopPropagation) {
  9.             event.stopPropagation();
  10.         } else {
  11.             event.cancelBubble = true;
  12.         }
  13.     }

上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。

阻止冒泡的举例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.                 /*
  12.         * 开启box1的绝对定位
  13.         */
  14.                 position: absolute;
  15.             }
  16.         </style>
  18.         <script type="text/javascript">
  19.             window.onload = function() {
  20.                 /*
  21.                  * 使div可以跟随鼠标移动
  22.                  */
  24.                 //获取box1
  25.                 var box1 = document.getElementById('box1');
  27.                 //给整个页面绑定：鼠标移动事件
  28.                 document.onmousemove = function(event) {
  29.                     //兼容的方式获取event对象
  30.                     event = event || window.event;
  32.                     // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
  33.                     var pagex = event.pageX || scroll().left + event.clientX;
  34.                     var pagey = event.pageY || scroll().top + event.clientY;
  36.                     //   设置div的偏移量（相对于整个页面）
  37.                     // 注意，如果想通过 style.left 来设置属性，一定要给 box1 开启绝对定位。
  38.                     box1.style.left = pagex + 'px';
  39.                     box1.style.top = pagey + 'px';
  40.                 };
  42.                 // 【重要注释】
  43.                 // 当 document.onmousemove 和 box2.onmousemove 同时触发时，通过  box2 阻止事件向 document 冒泡。
  44.                 // 也就是说，只要是在 box2 的区域，就只触发 document.onmousemove 事件
  45.                 var box2 = document.getElementById('box2');
  46.                 box2.onmousemove = function(event) {
  47.                     //阻止冒泡
  48.                     event = event || window.event;
  50.                     if (event && event.stopPropagation) {
  51.                         event.stopPropagation();
  52.                     } else {
  53.                         event.cancelBubble = true;
  54.                     }
  55.                 };
  56.             };
  58.             // scroll 函数封装
  59.             function scroll() {
  60.                 return {
  61.                     //此函数的返回值是对象
  62.                     left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
  63.                     right: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
  64.                 };
  65.             }
  66.         </script>
  67.     </head>
  68.     <body style="height: 1000px;width: 2000px;">
  69.         <div id="box2" style="width: 300px; height: 300px; background-color: #bfa;"></div>
  70.         <div id="box1"></div>
  71.     </body>
  72. </html>

关键地方可以看代码中的注释。

效果演示：

51-事件的传播和事件冒泡 - 图4

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

51-事件的传播和事件冒泡 - 图5