JavaScript addEventListener()

addEventListener()方法用于将事件处理程序附加到特定元素。它不会覆盖现有的事件处理程序。据说事件是JavaScript的重要组成部分。网页根据发生的事件做出响应。事件可以由用户生成，也可以由API生成。事件侦听器是等待事件发生的JavaScript过程。

addEventListener()方法是JavaScript的内置函数。我们可以将多个事件处理程序添加到特定元素，而不会覆盖现有的事件处理程序。

句法

element.addEventListener(event, function, useCapture);

尽管它具有三个参数，但参数事件和函数却被广泛使用。第三个参数是定义的可选参数。此函数的值定义如下。

参数值

事件：这是必需参数。可以将其定义为指定事件名称的字符串。

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

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

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

让我们看一下使用addEventListener()方法的一些说明。

例

这是使用addEventListener()方法的简单示例。我们必须单击给定的HTML按钮才能看到效果。

 Example of the addEventListener() method. 
 Click the following button to see the effect. 
 Click me 

输出量

点击给定的HTML按钮后，输出将为-

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

例

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

 This is an example of adding multiple events to the same element. 
 Click the following button to see the effect. 
 Click me 

输出量

现在，当我们单击按钮时，将显示一个警报。点击给定的HTML按钮后，输出将为-

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

例

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

 This is an example of adding multiple events of different type to the same element. 
 Click the following button to see the effect. 
 Click me 

输出量

当我们将光标移到按钮上时，输出将为-

单击按钮并离开光标后，输出为-

事件冒泡或事件捕获

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

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

假设我们内部有一个div元素和一个段落元素，并使用addEventListener()方法将“ click”事件应用于这两个事件。现在的问题是单击段落元素，首先处理哪个元素的click事件。

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

在“捕获”中，首先处理div元素的事件，然后处理段落元素的事件。这意味着在捕获外部元素的事件时，将首先对其进行处理，然后将处理最内部元素的事件。

addEventListener(event, function, useCapture);

我们可以使用useCapture参数指定传播。如果将其设置为false(这是其默认值)，则该事件将使用冒泡传播；而将其设置为true时，将进行捕获传播。

我们可以通过插图来了解冒泡和捕获。

例

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

当我们双击第一个div元素的span元素时，将首先处理span元素的事件，而不是div元素。这被称为冒泡。

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

 Bubbling 

This is a div element.



 This is a span element. 

 Capturing 
 This is a div element.



 This is a span element. 

输出量

我们必须双击特定元素才能看到效果。