Day02【JS】Event Delegation 事件委派

所谓的 Event Delegation，
即是藉由事件传递减少监听器数目的一种方法。

事件传递

事件传递分为两部分

• 捕获 Bubbling
• 冒泡 Capturing

DOM 的事件传递顺序

• CAPTURING_PHASE 捕获阶段
• AT_TARGET 目标本身
• BUBBLING_PHASE 冒泡阶段

事件处理 Event

• 使用互动事件时，函式只会收到一个参数，所以要使用event.target.value来接收真正的value
• 调用 preventDefault 来阻止标签原生行为
• 阻止冒泡的方法
  • e.stopPropagation();
  • e.nativeEvent.stopImmediatePropagation();

相关函式：

addEventListener

$target.addEventListener(EVENT: string, CALLBACK: function, USECAPTURE: boolean)

USECAPTURE：预设为 false，表示事件在冒泡阶段执行，设定为 true 则事件在捕获阶段执行。
当事件发生在 AT_TARGET 也就是目标身上时，事件不分冒泡捕获，也就是 USECAPTURE 参数无效，先添加的程序先执行。

stopPropagation

取消该 addEventListener 绑定的事件继续传递

stopImmediatePropagation

同时取消同一层级的所有事件传递

preventDefault

• 取消浏览器的预设行为（比方说超连结跳转），与 JS 绑定的事件传递无关
• preventDefault 的效果可被传递，在传递中被呼叫後，效果在之後的传递事件里都会延续

参考资料

• Event Delegation 事件委派
• DOM 的事件传递机制：捕获与冒泡
• D15 第七周 前端基础 JavaScript - 事件传递