JS Event Propagation (bubbling and capture)

事件传播是双向的(bidirectional), 先从DOM树的根元素(window)到事件目标元素(event target), 接着从事件事件目标元素回到DOM树的根元素. 整体可以分为下面三个阶段:

• 从根元素到事件目标父元素: 称之为事件捕获阶段(event capture phase)
• 事件目标自己: 称之为目标阶段(target phase)
• 从目标父元素到根元素: 称之为事件冒泡阶段(event bubble phase)

• Capture Phase
  • el.addEventListener(‘click’, listener, true)
  • Target Phase
• Bubble Phase
  • el.addEventListener(‘click’, listener, false)
  • el.addEventListener(‘click’, listener) // 第三个参数默认是false

Note: 某些事件比如 blur, focus, load 不会在冒泡阶段(bubble phase)出现, 也就是说这些事件只会在捕获阶段(capture phase)被捕获, 因此在这些事件控制上, addEventListener 函数的第三个参数必须设定为 true 否则无法执行回调函数.