事件冒泡

从内往外冒泡

企业微信截图_16406580414759.png

事件捕获

从最外层向内捕获

企业微信截图_16406580956852.png

事件流

事件捕获->事件处理程序->事件冒泡

addEventListener()和 removeEventListener()方法

它们接收 3 个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序

let btn = document.getElementById("myBtn"); 
btn.addEventListener("click", () => { console.log(this.id); }, false);

使用removeEventListener方法移除事件时第二个参数不能为匿名参数，正确使用如下：

let btn = document.getElementById("myBtn");
let handler = function() { console.log(this.id); };
btn.addEventListener("click", handler, false); 
btn.removeEventListener("click", handler, false);

冒泡兼容性更好，多数浏览器都支持，为了最好的兼容性，一般在冒泡阶段处理程序

把事件处理程序注册到捕获阶段通常用于在事件到达其指定目标之前拦截事件。如果不需要拦截，则不要使用事件捕获。

常用的方法

event.preventDefault();取消默认行为
event.stopPropagation();取消后续的事件捕获或冒泡
event.eventPhase; 可用于获得事件是在事件流的那个阶段被触发的

事件委托

事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。

1640680423(1).jpg

1640680572(1).jpg

因为所有列表项都是这个元素的后代，所以它们的事件会向上冒泡，最终都会由这个函数来处理

js事件流