狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

在討論冒泡和捕獲之前，先看這么一段代碼：

<style>
  .bd {
    border: 1px solid #000;
    padding: 8px;
  }
</style>
<div id="container1" class="bd">
  外層
  <div id="container2" class="bd">
    內層
    <div id="container3" class="bd">
      最內層
      <div id="container4" class="bd">
        按鈕
      </div>
    </div>
  </div>
</div>
<script>
  (() => {
    const container1 = document.querySelector('#container1')
    const container2 = document.querySelector('#container2')
    const container3 = document.querySelector('#container3')
    const container4 = document.querySelector('#container4')
    container1.addEventListener('click', () => {
      console.log('container1')
    })
    container2.addEventListener('click', () => {
      console.log('container2')
    })
    container3.addEventListener('click', () => {
      console.log('container3')
    })
    container4.addEventListener('click', () => {
      console.log('container4')
    })
  })()
</script>

頁面渲染大概長這樣：

點擊最里面的 按鈕 元素，按照思維慣例，是否應該先執行 container1 的點擊事件？？畢竟 container1 是最外層，而且也是最先綁定事件的元素。

然而控制臺輸出結果為：

container4
container3
container2
container1

有點出乎意料是吧，為什么先執行的是 container4 呢？

事件冒泡

JS 綁定的事件默認是冒泡規則，什么意思呢？可以理解為：觸發事件后就像水里面有一個泡泡，在水底慢慢的往上冒，從觸發事件的目標元素開始，經過一層一層的盒模型，分別觸發盒模型身上綁定的事件。

所以上面代碼中，在點擊 按鈕 時，先觸發了本身綁定的 click 事件，再一層一層往外傳播，最終就打印出了控制臺輸出的結果。

事件捕獲

注意：僅默認狀態下，事件是冒泡規則，在綁定事件時候，可以修改第三個配置參數改為由外向內傳播，這種傳播順序就是 事件捕獲 。

以上面代碼為藍本，僅添加 addEventListener 的第三個參數為 true，就將綁定規則改為了 事件捕獲 。如下：

container1.addEventListener('click', () => {
  console.log('container1')
}, true)
container2.addEventListener('click', () => {
  console.log('container2')
}, true)
container3.addEventListener('click', () => {
  console.log('container3')
}, true)
container4.addEventListener('click', () => {
  console.log('container4')
}, true)

還是點擊 按鈕，上面代碼執行結果：

container1
container2
container3
container4

事件捕獲還有另一種寫法，第三個參數可以傳入一個對象，通過對象的 capture 屬性設置為事件捕獲。

container1.addEventListener('click', () => {
  console.log('container1')
}, {
  // 另一種設置事件捕獲方式
  capture: true,
})

冒泡與捕獲順序

既然同一個事件有冒泡與捕獲，那么冒泡與捕獲的順序如何？上例子：

container1.addEventListener('click', () => {
  console.log('冒泡：', 'container1')
})
container2.addEventListener('click', () => {
  console.log('冒泡：', 'container2')
})
container3.addEventListener('click', () => {
  console.log('冒泡：', 'container3')
})
container4.addEventListener('click', () => {
  console.log('冒泡：', 'container4')
})
container1.addEventListener('click', () => {
  console.log('捕獲：', 'container1')
}, true)
container2.addEventListener('click', () => {
  console.log('捕獲：', 'container2')
}, true)
container3.addEventListener('click', () => {
  console.log('捕獲：', 'container3')
}, true)
container4.addEventListener('click', () => {
  console.log('捕獲：', 'container4')
}, true)

同時給元素綁定兩種事件，點擊 按鈕 執行結果：

捕獲： container1
捕獲： container2
捕獲： container3
捕獲： container4
冒泡： container4
冒泡： container3
冒泡： container2
冒泡： container1

到這里已經可以得出結論：JS 的事件傳播會經歷三個階段，由 事件捕獲 開始，傳遞到 目標元素 之后，就改為 事件冒泡，冒泡階段完了之后事件結束。

阻止事件傳播

既然事件有傳播，那程序就有辦法阻止事件傳播。所有事件執行時都有一個 event 對象，此對象中有方法可用于阻止事件傳播。

示例：

container1.addEventListener('click', () => {
  console.log('冒泡：', 'container1')
})
container2.addEventListener('click', () => {
  console.log('冒泡：', 'container2')
})
container3.addEventListener('click', () => {
  console.log('冒泡：', 'container3')
})
container4.addEventListener('click', () => {
  console.log('冒泡：', 'container4')
})
container1.addEventListener('click', (event) => {
  event.stopPropagation()
  console.log('捕獲：', 'container1')
}, true)
container2.addEventListener('click', () => {
  console.log('捕獲：', 'container2')
}, true)
container3.addEventListener('click', () => {
  console.log('捕獲：', 'container3')
}, true)
container4.addEventListener('click', () => {
  console.log('捕獲：', 'container4')
}, true)

注意 event.stopPropagation() 這個方法，此方法是阻止事件傳播的關鍵。

以上代碼在 container1 這個元素上就阻止了事件傳播，所以點擊 按鈕 之后，僅 container1 會執行，其他所有元素都不會再觸發，結果：

捕獲： container1

調用 event.stopPropagation() 就是告訴 JS，事件到此為止，不再繼續了。

event 對象其他常用方法和屬性：

event.target：觸發事件的原始元素。
event.currentTarget：當前綁定事件的元素（等同于 this）。
event.type：事件類型（如 "click"）。
event.preventDefault()：阻止默認行為（如表單提交、鏈接跳轉、自定義右鍵菜單）。
event.stopPropagation()：阻止事件冒泡。
event.stopImmediatePropagation()：阻止同一元素的其他監聽器執行。
event.x 和 event.y：鼠標點擊位置的坐標。

在事件中要使用 this 獲取元素時，必須使用 function 函數，使用箭頭函數綁定的事件 this 將會指向外層作用域的 this 指針，如下代碼中箭頭函數 this 指向的是 Window ：

<div id="container4" class="bd">
  按鈕
</div>
<script>
  (() => {
    const container4 = document.querySelector('#container4')
    container4.addEventListener('click', () => {
      console.log(this) // Window 對象
    })
    container4.addEventListener('click', function () {
      console.log(this) // div#container4
    })
  })()
</script>

?轉自https://www.cnblogs.com/linx/p/18959113