带你读《现代Javascript高级教程》八、JavaScript事件流：深入理解事件处理和传播机制（1）https://developer.aliyun.com/article/1349641?groupCode=tech_library
2. 事件流的属性
事件流涉及到三个主要的概念：事件捕获阶段、目标阶段和事件冒泡阶段。了解这些阶段和相关的属性对于理解事件流的机制至关重要。
1） 事件捕获阶段
事件捕获阶段是事件流的第一个阶段，从根节点开始向下传播到目标元素。在事件捕获阶段中，事件依次经过每个父元素，直到达到目标元素。
在事件捕获阶段，可以使用addEventListener的第三个参数指定事件处理程序在捕获阶段中执行。
element.addEventListener('click', handler, true);
2） 目标阶段
目标阶段是事件流的第二个阶段，事件到达目标元素后被触发执行事件处理程序。
3） 事件冒泡阶段
事件冒泡阶段是事件流的最后一个阶段，事件从目标元素开始向上冒泡，依次经过每个父元素，直到达到根节点。
在事件冒泡阶段，可以使用addEventListener的第三个参数设置为false或省略来指定事件处理程序在冒泡阶段中执行（默认值）。
element.addEventListener('click', handler, false);// 或 element.addEventListener('click', handler);
4） 事件对象
在事件处理程序中，可以通过事件对象访问和操作相关的事件信息。事件对象提供了一些属性和方法，可以获取事件的类型、目标元素、鼠标坐标等信息。
例如，可以通过事件对象的type属性获取事件类型：
element.addEventListener('click', function(event) { console.log(event.type); // 输出 'click'});
3. 事件流的应用场景
事件流在前端开发中具有广泛的应用场景，下面介绍几个常见的应用场景：
1）事件处理
事件流提供了一种机制，用于处理和响应用户的交互操作。通过在目标元素上注册事件处理程序，可以捕获和处理用户触发的事件，实现交互功能。
例如，通过在按钮上注册click事件处理程序，可以在按钮被点击时执行相应的代码逻辑。
const button = document.getElementById('myButton'); button.addEventListener('click', function(event) { console.log('按钮被点击');});
2） 事件代理
事件代理（Event Delegation）是一种常见的优化技术，用于处理大量具有相似行为的子元素事件。通过在父元素上注册事件处理程序，可以利用事件冒泡机制，统一管理子元素的事件处理。
例如，可以在父元素上注册click事件处理程序，根据触发事件的具体子元素进行不同的操作。
const list = document.getElementById('myList'); list.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('项目被点击'); }});
3） 事件委托
事件委托是一种通过将事件处理委托给父元素来提高性能和简化代码的技术。它利用事件冒泡机制，在父元素上注册一个事件处理程序，处理多个子元素的相同事件。
例如，可以在父元素上注册click事件处理程序，根据触发事件的子元素的不同类别执行不同的操作。
const container = document.getElementById('myContainer'); container.addEventListener('click', function(event) { if (event.target.classList.contains('button')) { console.log('按钮被点击'); } else if (event.target.classList.contains('link')) { console.log('链接被点击'); }});
带你读《现代Javascript高级教程》八、JavaScript事件流：深入理解事件处理和传播机制（3）https://developer.aliyun.com/article/1349639?groupCode=tech_library
