2024年4月30日发(作者：)

博学笃行 自强不息

addeventlistener三个参数

addEventListener三个参数

在Web开发中，addEventListener（事件，处理函数，冒泡/捕获）

是一种在元素上绑定事件处理函数的常用方法。它具有三个参数，

分别是事件、处理函数和冒泡/捕获。

1. 事件

事件是指需要绑定的具体行为或交互，例如点击、鼠标移动、键盘

按键等。通过该参数，我们告诉浏览器监听哪个具体事件。

常见的事件包括：

- click：点击事件，当元素被点击时触发。

- mouseover：鼠标悬停事件，当鼠标移动到元素上方时触发。

- keydown：按键事件，当按下键盘上任意键时触发。

- submit：表单提交事件，当表单提交时触发。

除了以上常见事件，还有许多其他事件可供选择。事件的选择应根

据具体需求来决定。

1

博学笃行 自强不息

2. 处理函数

处理函数是一个回调函数，用于定义需要执行的具体操作。当事件

被触发时，浏览器会调用处理函数。

处理函数可以直接作为匿名函数传递，也可以通过函数名来传递。

示例代码如下：

```

ntListener('click', function() {

// 在这里编写具体的事件处理逻辑

});

```

在实际使用中，我们可以将事件处理逻辑封装为独立的函数，增加

代码的可读性和可维护性。

3. 冒泡/捕获

冒泡和捕获是指事件在DOM树中传播的方式。当某个元素上的事

件被触发时，该事件会根据冒泡或捕获的方式，逐级传播到祖先元

素或子孙元素。

2

博学笃行 自强不息

通过addEventListener的第三个参数，我们可以指定事件是在冒

泡阶段还是捕获阶段触发处理函数。

- 若设置为false（默认值），则事件在冒泡阶段触发处理函数。

- 若设置为true，事件在捕获阶段触发处理函数。

示例代码如下：

```

ntListener('click', function() {

// 冒泡阶段触发处理函数

}, false);

ntListener('click', function() {

// 捕获阶段触发处理函数

}, true);

```

冒泡阶段是从子元素向父元素传播，而捕获阶段则相反。一般情况

下，我们使用冒泡阶段来处理事件。

3

博学笃行 自强不息

总结：

- addEventListener是一种在元素上绑定事件处理函数的方法。

- 它具有三个参数，分别是事件、处理函数和冒泡/捕获。

- 通过事件参数，我们告诉浏览器监听哪个具体事件。

- 处理函数是一个回调函数，定义需要执行的具体操作。

- 通过冒泡/捕获参数，我们可以指定事件是在冒泡阶段还是捕获阶

段触发处理函数。

以上是关于addEventListener三个参数的基本介绍，掌握这些基

本概念能够帮助我们更好地理解和应用该方法，实现更丰富、交互

更动态的Web页面。

4