首页手记 <JS篇>...

<JS篇> 事件绑定&事件冒泡与捕获

标签：

Html5 JavaScript 面试

大家在做笔试题的时候肯定经常会遇到事件绑定和事件冒泡与捕获的问题，这篇我们来详细解析 JavaScript 的事件绑定，先创建下面的 test.html 文件，里面包含了四个相互嵌套的 div 。

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="user-scalable=yes,initial-scale=1,minimum-scale=0.67"
    />
    <title>test</title>
  </head>

  <style>
    div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
    }

    p {
      padding: 5px;
      margin: 0;
    }

    #one {
      background: red;
      width: 80vw;
      height: 80vw;
    }

    #two {
      background: blue;
      width: 60vw;
      height: 60vw;
    }

    #three {
      background: gold;
      width: 40vw;
      height: 40vw;
    }

    #four {
      background: grey;
      width: 20vw;
      height: 20vw;
    }
  </style>

  <body>
    <div id="one" onclick="console.log('1')">
      <p>one</p>
      <div id="two" onclick="console.log('2')">
        <p>two</p>
        <div id="three" onclick="console.log('3')">
          <p>three</p>
          <div id="four" onclick="console.log('4')">
            <p>four</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

web 技术中的 DOM 模型（即文档对象模型）有着三个发展阶段，从 DOM0（约定俗成的内容并无具体标准，各厂商百花齐放）发展出来的 DOM1，DOM2，DOM3，而我们现在所说的事件绑定就是其中的一部分。（ 其他的这里就不展开了 ）

DOM 的历史可以追溯至1990年代后期，微软与 Netscape 的“浏览器大战”，双方为了在 JavaScript 与 JScript 一决生死，大家都在网页技术中添加了很多各自的 API，困扰着广大的开发者。这种混乱的局面最后由 W3C 的标准设立而解决，DOM 标准就是其中之一。

DOM1 的事件绑定

在 DOM1 级中有着这两种事件绑定方式，以 click 事件为例：

行内事件绑定

<div onclick="console.log(this)">
// 或者
<div onclick="fn()">
<script>
  var fn = function() {
    console.log(this) // 与其他不同的是这里的 this 是只想 window 而不是节点本身
  }
// 关于 this 的执行上下文的问题，我会在其他篇章展开
</script>

动态绑定

<div id="one">
<script>
  document.getElementById('one').onclick = function() {
    console.log(this)
  }
</script>

这种远古时期的标准有下面的缺点：

相同的事件只能绑定一个函数，前面绑定的会被覆盖；
没有事件流，遇到多个子元素触发同一个事件时，或者触发子元素需要同时触发父元素绑定事件时，这种原始的事件绑定将十分困难；

DOM2

为了解决 DOM1 的缺点 W3C 加入了事件监听与事件流（ 即事件冒泡与捕获 ），形成了 DOM2 标准。

事件监听具体 API 为：

// addEventListener 添加事件监听
element.addEventListener(event, function, useCapture);

// removeEventListener 移除事件监听
element.removeEventListener(event, function, useCapture) ;

参数	描述
event	字符串，指定事件名，不要使用 “on” 前缀；
function	指定要事件触发时执行的函数；
useCapture	可选，true - 事件在捕获阶段执行，false- 默认，事件在冒泡阶段执行；

这时候我们就可以为同一个事件绑定多个函数了，在 test 文件中加入下面这段 JS，点击 one，可以发现同时触发了监听事件与绑定事件：

<script>
var box = document.querySelector('#one')
  box.addEventListener(
    'click',
    function(e) {
      console.log('box1')
    },
    false
  )

  box.addEventListener(
    'click',
    function(e) {
      console.log('box2')
    },
    false
  )
</script>

事件流

冒泡
这个标准下为所有的事件都加上冒泡功能，点击 test 中的 four 可以看到控制台中依序输出了：4 -> 3 -> 2 -> 1。这说明冒泡机制是由下向上的触发事件的，先触发本元素事件，再向上寻找父级事件触发直到 document 、window 对象节点。

捕获
实现捕获我们要使用的 addEventListener 的第三个参数 useCapture ，将 test.html 改成下面这样：

<body>
  <div id="one">
    <p>one</p>
    <div id="two">
      <p>two</p>
      <div id="three">
        <p>three</p>
        <div id="four">
          <p>four</p>
        </div>
      </div>
    </div>
  </div>
</body>

<script>
  document.querySelector('#one').addEventListener(
    'click',
    function() {
      console.log('one')
    },
    true
  )

  document.querySelector('#two').addEventListener(
    'click',
    function() {
      console.log('two')
    },
    true
  )

  document.querySelector('#three').addEventListener(
    'click',
    function() {
      console.log('three')
    },
    true
  )

  document.querySelector('#four').addEventListener(
    'click',
    function() {
      console.log('four')
    },
    true
  )
</script>

捕获恰恰与冒泡相反，点击 four 可以看到控制台中依序输出了，one -> two -> three -> four。捕获机制是由上至下触发事件的。

那么冒泡与捕获之间有优先级吗？我们可以再次为 div 添加上 onclick 事件，再次点击 four ，我们将会看到下面的结果：one -> two -> three -> 4 -> four -> 3 -> 2 -> 1 ，由此我们可以下结论：

在一个嵌套型结构内，事件触发后先从最外层父级开始向下执行其他元素的捕获事件；
再执行最小唯一元素的绑定事件，按照执行上下文，本例中为 onclick 先绑定，则先输出 4 再到 four；
最后再从本元素向上执行其他元素的冒泡事件；

Tips：对于第二点，你可以将 four 上的 onclick 事件去掉，在最后加上 document.querySelector('#four').addEventListener( 'click', function() { console.log('4') }, false )
顺序就会变成：one -> two -> three -> four -> 4 -> 3 -> 2 -> 1

有趣的是，当你点击 three 时，又会得到这样的结果：one -> two -> three -> 3 -> 2 -> 1 ，这次 onclick 却排在 addEventListener 后面，回头看刚刚的定义，你品，你细品。

其他元素的捕获事件 > 最小唯一元素的绑定事件 > 其他元素的冒泡事件

关键就在这个最小唯一身上，当你触发的是嵌套型结构内最底层并且没有兄弟级的元素事件时，执行优先级就是上文所述。

当你触发的不是最小唯一的元素事件时，比如 three 最小唯一的父级，或者给 four 添加一个同级元素 five，那么执行的优先级就为：

捕获事件 > 冒泡事件

到底为什么这么设定，我查不到，有兴趣的同学可以看看 W3C 关于这方面的定义，欢迎留言分享。

关注我，Max_Law，获取更多面试技巧与前端知识。

点击查看更多内容