子舒的博客
·
事件监听函数，以及事件的捕获和冒泡机制
💡
原文中文，约5300字，阅读约需13分钟。
📝
内容提要
文章主要讲述了浏览器中的事件处理机制，包括事件流、事件捕获和冒泡。通过示例说明如何使用 `addEventListener` 和 `removeEventListener` 方法来绑定和移除事件监听器，以及事件触发的顺序。强调了事件处理的优缺点，特别是在不同浏览器中的表现差异。
🎯
关键要点
- 事件用于浏览器与用户操作之间的交互，触发绑定的事件。
- 事件流是事件在元素节点和根节点之间传播的过程，包括捕获和冒泡阶段。
- 使用 `addEventListener` 方法可以为元素添加多个事件监听器，事件不会覆盖，会依次执行。
- `addEventListener` 方法的第二个参数是触发的事件，第三个参数可以控制事件的捕获或冒泡。
- 事件触发的顺序受捕获和冒泡的影响，多个事件的触发顺序可以通过参数控制。
- 事件处理的优缺点包括：优点是代码可以访问全局变量，缺点是不同浏览器中表现差异。
- DOM0 级事件处理程序简单且兼容性好，但只能绑定一个事件处理函数。
- DOM2 级事件处理程序支持捕获和冒泡阶段，并允许一个元素绑定多个处理函数，但IE不支持。
❓
延伸问答
什么是事件流？
事件流是事件在元素节点和根节点之间传播的过程，包括捕获和冒泡阶段。
如何使用 addEventListener 方法？
使用 addEventListener 方法可以为元素添加多个事件监听器，事件不会覆盖，会依次执行。
事件的捕获和冒泡有什么区别？
捕获阶段是事件从根节点向目标节点传播，冒泡阶段是事件从目标节点向根节点传播。
removeEventListener 方法的作用是什么？
removeEventListener 方法用于移除之前通过 addEventListener 绑定的事件监听器。
事件处理的优缺点有哪些？
优点是代码可以访问全局变量，缺点是不同浏览器中表现差异。
DOM0 级事件处理程序和 DOM2 级事件处理程序有什么不同？
DOM0 级事件处理程序只能绑定一个事件处理函数，DOM2 级事件处理程序支持多个处理函数，并允许捕获和冒泡。
➡️
