JS_DOM/BOM要点_2(高级事件)

JavaScript事件监听与移除及事件流详解

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #ajax

入门进阶同时被 3 个专栏收录

12 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

DOM

2 篇文章

订阅专栏

本文深入探讨了JavaScript中的事件监听器，包括使用`addEventListener`添加监听器，参数`useCapture`用于控制事件处理阶段。同时介绍了如何通过`removeEventListener`移除事件监听器。详细阐述了DOM事件流的捕获和冒泡阶段，以及在事件处理中`event`对象的作用，如`target`、`type`属性，以及`preventDefault()`和`stopPropagation()`方法的使用。最后，讨论了事件委托的概念，它通过在父元素上设置监听器以提高性能。

注册事件：监听器

a) e.addEventListener(type, listener, [useCapture])

b) useCapture: true--执行捕获阶段

false或者不写--执行冒泡阶段

移除事件：

DOM事件流：

事件对象：e.addEventListener('click', function(event) { })

a) e.target: 返回的是触发事件的对象（点击的谁就返回谁）

this: 返回的是绑定对象（绑定的谁返回谁）

b) e.type: 返回触发事件的类型（click, mouseover, mouseout等等）

c) e.preventDefault();阻止默认事件的触发（连接让其不跳转，提交按钮不提交等）

d) e.stopPropagation();阻止冒泡阶段发生

事件委托：只操作一次DOM，提高性能（利用冒泡）