JavaScript addEventListener()

addEventListener() 方法用于向特定元素附加事件处理器。它不会覆盖现有的事件处理器。事件是 JavaScript 的一个重要组成部分。网页会根据发生的事件做出响应。事件可以是用户生成或 API 生成的。事件监听器是 JavaScript 中等待事件发生的程序。

addEventListener() 方法是 JavaScript 的一个内置函数。我们可以在不覆盖现有事件处理程序的情况下，为特定元素添加多个事件处理程序。

语法

虽然它有三个参数，但 **event** 和 **function** 参数被广泛使用。第三个参数是可选的。该函数的值定义如下。

参数值

event： 这是一个必需的参数。它可以定义为指定事件名称的字符串。

注意：请勿在参数值前添加任何前缀，例如“on”。例如，使用“click”而不是“onclick”。

function： 这也是一个必需的参数。它是一个响应事件发生的 JavaScript 函数。

useCapture： 这是一个可选参数。它是一个布尔类型的值，用于指定事件是在冒泡阶段还是捕获阶段执行。其可能的值为 **true** 和 **false**。当设置为 true 时，事件处理器在捕获阶段执行。当设置为 false 时，处理器在冒泡阶段执行。其默认值为 **false**。

让我们看一些使用 addEventListener() 方法的示例。

示例

这是使用 addEventListener() 方法的一个简单示例。我们需要点击提供的 HTML 按钮 来查看效果。

输出

点击提供的 HTML 按钮后，输出将是 -

现在，在下一个示例中，我们将看到如何向同一元素添加多个事件，而不会覆盖现有事件。

示例

在此示例中，我们向同一元素添加了多个事件。

输出

现在，当我们点击按钮时，将显示一个警报。点击提供的 HTML 按钮后，输出将是 -

当我们退出警报时，输出是 -

示例

在此示例中，我们向同一元素添加了不同类型的多个事件。

输出

当我们将鼠标悬停在按钮上时，输出将是 -

点击按钮并移开鼠标后，输出将是 -

事件冒泡或事件捕获

现在，我们了解了 JavaScript 的 addEventListener() 方法的第三个参数，即 **useCapture** 的用法。

在 HTML DOM 中，**冒泡**和**捕获**是事件传播的两种方式。我们可以通过举例来理解这些方式。

假设我们有一个 div 元素，其中包含一个段落元素，并且我们使用 **addEventListener()** 方法将 **“click”** 事件应用于两者。现在的问题是，点击段落元素时，哪个元素的点击事件会先被处理。

因此，在**冒泡**中，首先处理段落元素的事件，然后处理 div 元素的事件。这意味着在冒泡中，首先处理内部元素的事件，然后处理最外部元素的事件。

在**捕获**中，首先处理 div 元素的事件，然后处理段落元素的事件。这意味着在捕获中，首先处理外部元素的事件，然后处理最内部元素的事件。

我们可以使用 **useCapture** 参数来指定传播。当它设置为 false（这是其默认值）时，事件使用冒泡传播；当它设置为 true 时，则为捕获传播。

我们可以通过一个图示来理解 *冒泡* 和 *捕获*。

示例

在此示例中，有两个 div 元素。我们可以看到第一个 div 元素的冒泡效果和第二个 div 元素的捕获效果。

当双击第一个 div 元素的 span 元素时，span 元素的事件会比 div 元素的事件先处理。这称为 *冒泡*。

但是，当我们双击第二个 div 元素的 span 元素时，div 元素的事件会比 span 元素的事件先处理。这称为 *捕获*。

输出

我们需要双击特定的元素来查看效果。