<JS篇> 事件綁定&事件冒泡與捕獲

大家在做筆試題的時(shí)候肯定經(jīng)常會(huì)遇到事件綁定和事件冒泡與捕獲的問題，這篇我們來詳細(xì)解析 JavaScript 的事件綁定，先創(chuàng)建下面的 test.html 文件，里面包含了四個(gè)相互嵌套的 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>
四個(gè)嵌套的DIV

web 技術(shù)中的 DOM 模型（即文檔對(duì)象模型）有著三個(gè)發(fā)展階段，從 DOM0（約定俗成的內(nèi)容并無具體標(biāo)準(zhǔn)，各廠商百花齊放） 發(fā)展出來的 DOM1，DOM2，DOM3，而我們現(xiàn)在所說的事件綁定就是其中的一部分。（ 其他的這里就不展開了 ）

DOM 的歷史可以追溯至1990年代后期，微軟與 Netscape 的“瀏覽器大戰(zhàn)”，雙方為了在 JavaScript 與 JScript 一決生死，大家都在網(wǎng)頁技術(shù)中添加了很多各自的 API，困擾著廣大的開發(fā)者。這種混亂的局面最后由 W3C 的標(biāo)準(zhǔn)設(shè)立而解決，DOM 標(biāo)準(zhǔn)就是其中之一。

DOM1 的事件綁定

在 DOM1 級(jí)中有著這兩種事件綁定方式，以 click 事件為例：

  1. 行內(nèi)事件綁定
<div onclick="console.log(this)">
// 或者
<div onclick="fn()">
<script>
  var fn = function() {
    console.log(this) // 與其他不同的是這里的 this 是只想 window 而不是節(jié)點(diǎn)本身
  }
// 關(guān)于 this 的執(zhí)行上下文的問題，我會(huì)在其他篇章展開
</script>
  1. 動(dòng)態(tài)綁定
<div id="one">
<script>
  document.getElementById('one').onclick = function() {
    console.log(this)
  }
</script>

這種遠(yuǎn)古時(shí)期的標(biāo)準(zhǔn)有下面的缺點(diǎn)：

  • 相同的事件只能綁定一個(gè)函數(shù)，前面綁定的會(huì)被覆蓋；
  • 沒有事件流，遇到多個(gè)子元素觸發(fā)同一個(gè)事件時(shí)，或者觸發(fā)子元素需要同時(shí)觸發(fā)父元素綁定事件時(shí)，這種原始的事件綁定將十分困難；

DOM2

為了解決 DOM1 的缺點(diǎn) W3C 加入了事件監(jiān)聽與事件流（ 即事件冒泡與捕獲 ），形成了 DOM2 標(biāo)準(zhǔn)。

事件監(jiān)聽具體 API 為：

// addEventListener 添加事件監(jiān)聽
element.addEventListener(event, function, useCapture);

// removeEventListener 移除事件監(jiān)聽
element.removeEventListener(event, function, useCapture) ;
參數(shù) 描述
event 字符串，指定事件名，不要使用 "on" 前綴；
function 指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)；
useCapture 可選，true - 事件在捕獲階段執(zhí)行，false- 默認(rèn)，事件在冒泡階段執(zhí)行；

這時(shí)候我們就可以為同一個(gè)事件綁定多個(gè)函數(shù)了，在 test 文件中加入下面這段 JS，點(diǎn)擊 one，可以發(fā)現(xiàn)同時(shí)觸發(fā)了監(jiān)聽事件與綁定事件：

<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>

事件流

冒泡
這個(gè)標(biāo)準(zhǔn)下為所有的事件都加上冒泡功能，點(diǎn)擊 test 中的 four 可以看到控制臺(tái)中依序輸出了：4 -> 3 -> 2 -> 1。這說明冒泡機(jī)制是由下向上的觸發(fā)事件的，先觸發(fā)本元素事件，再向上尋找父級(jí)事件觸發(fā)直到 document 、window 對(duì)象節(jié)點(diǎn)。

捕獲
實(shí)現(xiàn)捕獲我們要使用的 addEventListener 的第三個(gè)參數(shù) 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>

捕獲恰恰與冒泡相反，點(diǎn)擊 four 可以看到控制臺(tái)中依序輸出了，one -> two -> three -> four。捕獲機(jī)制是由上至下觸發(fā)事件的。

那么冒泡與捕獲之間有優(yōu)先級(jí)嗎？我們可以再次為 div 添加上 onclick 事件，再次點(diǎn)擊 four ，我們將會(huì)看到下面的結(jié)果：one -> two -> three -> 4 -> four -> 3 -> 2 -> 1 ，由此我們可以下結(jié)論：

  1. 在一個(gè)嵌套型結(jié)構(gòu)內(nèi)，事件觸發(fā)后先從最外層父級(jí)開始向下執(zhí)行其他元素的捕獲事件；
  2. 再執(zhí)行最小唯一元素的綁定事件，按照?qǐng)?zhí)行上下文，本例中為 onclick 先綁定，則先輸出 4 再到 four；
  3. 最后再從本元素向上執(zhí)行其他元素的冒泡事件；

Tips：對(duì)于第二點(diǎn)，你可以將 four 上的 onclick 事件去掉，在最后加上 document.querySelector('#four').addEventListener( 'click', function() { console.log('4') }, false )
順序就會(huì)變成：one -> two -> three -> four -> 4 -> 3 -> 2 -> 1

有趣的是，當(dāng)你點(diǎn)擊 three 時(shí)，又會(huì)得到這樣的結(jié)果：one -> two -> three -> 3 -> 2 -> 1 ，這次 onclick 卻排在 addEventListener 后面，回頭看剛剛的定義，你品，你細(xì)品。

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

關(guān)鍵就在這個(gè)最小唯一身上，當(dāng)你觸發(fā)的是嵌套型結(jié)構(gòu)內(nèi)最底層并且沒有兄弟級(jí)的元素事件時(shí)，執(zhí)行優(yōu)先級(jí)就是上文所述。

當(dāng)你觸發(fā)的不是最小唯一的元素事件時(shí)，比如 three 最小唯一的父級(jí)，或者給 four 添加一個(gè)同級(jí)元素 five，那么執(zhí)行的優(yōu)先級(jí)就為：

捕獲事件 > 冒泡事件

到底為什么這么設(shè)定，我查不到，有興趣的同學(xué)可以看看 W3C 關(guān)于這方面的定義，歡迎留言分享。

關(guān)注文集 《前端面試總結(jié)》 ，獲取更多面試技巧。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容