Bubbling & Capturing

發表於 | 分類於

事件傳遞順序

在啟動事件時，會逐層傳遞，順序不同各自為

  • event bubbling: 由下而上，直到 document
  • event capturing: 由上而下

event bubbling

因為冒泡事件現象，為了防止點擊底層事件會影響到上層元素會使用 JS 的 event.StopPropagation()，阻止事件的傳播。

event capturing

由上而下的傳遞，可以讓事件順地的運作起來，所以通常不會去阻止，event capturing，但如果想要阻止可以將 useCapture 設為 true。

element.addEventListener("click", handler, useCapture)

示範

<ul>
  <li><span>X</span> Go To Potions Class</li>
  <li><span>X</span> Buy New Robes</li>
  <li><span>X</span> Visit Hagrid</li>
</ul>

// jQuery
$('span').click(function (event) {
	console.log('span')
	event.stopPropagation() // 阻止 bubbling
})
$('ul').click(function () {
	console.log('ul')
})
$('#container').click(function () {
	console.log('container')
})
$('body').click(function () {
	console.log('body')
})

// javascript
const span = document.querySelector('span')
const ul = document.querySelector('ul')
const container = document.querySelector('#container')
const body = document.querySelector('ul')

span.addEventListener('click', function () {
  console.log('span')
})
ul.addEventListener('click', function () {
  console.log('ul')
})
container.addEventListener('click', function () {
  console.log('container')
})
body.addEventListener('click', function () {
  console.log('body')
})