addEventListener()
addEventListener()方法用于将事件处理程序附加到特定元素。它不会覆盖现有的事件处理程序。据说事件是JavaScript的重要组成部分。网页根据发生的事件做出响应。事件可以由用户生成，也可以由API生成。事件侦听器是等待事件发生的JavaScript过程。
addEventListener()是JavaScript方法。我们可以将多个事件处理程序添加到特定元素，而不会覆盖现有的事件处理程序。
语法
element.addEventListener(event, function, useCapture);
尽管具有三个参数，但广泛使用了参数
event 和
function 。第三个参数是定义的可选参数。此函数的值定义如下。
参数值
event：是必需的参数。可以将其定义为指定事件名称的字符串。
注意：请勿在参数值中使用任何前缀，像"on"。例如，使用"单击"而不是" onclick"。
useCapture：这是一个可选参数。它是一个布尔类型值，它指定事件是在冒泡阶段还是捕获阶段执行。其可能的值为
true 和
false 。设置为true时，事件处理程序在捕获阶段执行。设置为false时，处理程序在冒泡阶段执行。它的默认值为
false 。
让我们看看使用addEventListener()方法的一些说明。
示例
这是使用addEventListener()方法的简单示例。我们必须单击给定的
HTML按钮才能看到效果。
<!DOCTYPE html>
<html>
<body>
<p> Example of the addEventListener() method. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<script>
document.getElementById("btn").addEventListener("click", fun);
function fun() {
document.getElementById("para").innerHTML = "Hello World" + "<br>" + "Welcome to the lidihuo.com";
}
</script>
</body>
</html>
输出
现在，在下一个示例中，我们将看到如何在不覆盖现有事件的情况下将多个事件添加到同一元素。
示例
在此示例中，我们将多个事件添加到同一元素。
<!DOCTYPE html>
<html>
<body>
<p> This is an example of adding multiple events to the same element. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<p id = "para1"></p>
<script>
function fun() {
alert("Welcome to the lidihuo.com");
}
function fun1() {
document.getElementById("para").innerHTML = "This is second function";
}
function fun2() {
document.getElementById("para1").innerHTML = "This is third function";
}
var mybtn = document.getElementById("btn");
mybtn.addEventListener("click", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("click", fun2);
</script>
</body>
</html>
输出
现在，当我们单击按钮，将显示警报。点击给定的HTML按钮后，输出将为-
当我们退出警报，输出为-
示例
在此示例中，我们将不同类型的多个事件添加到同一元素。
<!DOCTYPE html>
<html>
<body>
<p> This is an example of adding multiple events of different type to the same element. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<script>
function fun() {
btn.style.width = "50px";
btn.style.height = "50px";
btn.style.background = "yellow";
btn.style.color = "blue";
}
function fun1() {
document.getElementById("para").innerHTML = "This is second function";
}
function fun2() {
btn.style.width = "";
btn.style.height = "";
btn.style.background = "";
btn.style.color = "";
}
var mybtn = document.getElementById("btn");
mybtn.addEventListener("mouseover", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("mouseout", fun2);
</script>
</body>
</html>
输出
当我们移动将光标悬停在按钮上，输出将为-
单击按钮后离开光标，输出将是-
事件冒泡或事件捕获
现在，我们了解了JavaScript的addEventListener()的第三个参数的使用，即
useCapture。
在HTML DOM中，
冒泡和
捕获是事件传播的两种方式。我们可以通过举例来理解这些方式。
假设我们内部有一个div元素和一个paragraph元素，并且我们将
" click" 事件应用于这两个元素使用
addEventListener()方法。现在的问题是单击段落元素，首先处理哪个元素的click事件。
因此，在
冒泡中，首先处理段落元素的事件，然后处理div元素的事件已处理。这意味着在冒泡时，首先处理内部元素的事件，然后再处理最外部元素的事件。
在
捕获中，首先处理div元素的事件，然后然后处理段落元素的事件。这意味着，在捕获外部元素的事件时，将首先对其进行处理，然后将对最内部元素的事件进行处理。
addEventListener(event, function, useCapture);
我们可以使用
useCapture 参数指定传播。如果将其设置为false(这是其默认值)，则该事件将使用冒泡传播；而将其设置为true时，则是捕获传播。
我们可以理解
冒泡和
捕获。
示例
在此示例中，有两个div元素。我们可以看到第一个div元素的冒泡效果和第二个div元素的捕获效果。
当我们双击第一个div元素的span元素时，将首先处理span元素的事件， div元素。它被称为
冒泡。
但是当我们双击第二个div元素的span元素时，首先处理div元素的事件而不是span元素。它称为
捕获。
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: lightblue;
border: 2px solid red;
font-size: 25px;
text-align: center;
}
span{
border: 2px solid blue;
}
</style>
</head>
<body>
<h1> Bubbling </h1>
<div id = "d1">
This is a div element.
<br><br>
<span id = "s1"> This is a span element. </span>
</div>
<h1> Capturing </h1>
<div id = "d2"> This is a div element.
<br><br>
<span id = "s2"> This is a span element. </span>
</div>
<script>
document.getElementById("d1").addEventListener("dblclick", function() {alert('You have double clicked on div element')}, false);
document.getElementById("s1").addEventListener("dblclick", function() {alert('You have double clicked on span element')}, false);
document.getElementById("d2").addEventListener("dblclick", function() {alert('You have double clicked on div element')}, true);
document.getElementById("s2").addEventListener("dblclick", function() {alert('You have double clicked on span element')}, true);
</script>
</body>
</html>
输出
我们必须加倍单击特定元素以查看效果。
