JavaScript教程-JavaScript addEventListener()

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

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

语法

element.addEventListener(event, function, useCapture);

尽管它有三个参数，但通常会广泛使用参数 event 和 function。第三个参数是可选的。此函数的参数值定义如下。

参数值

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

注意：不要在参数值中使用任何前缀，比如不要使用 "on"。例如，使用 "click" 而不是使用 "onclick"。

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

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

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

示例

这是使用 addEventListener() 方法的简单示例。我们需要单击给定的HTML 按钮以查看效果。

<!DOCTYPE html>
<html>
<head>
<title>Javascript Events</title>
</head>
<body>
<p>addEventListener() 方法的示例。</p>
<p>单击以下按钮以查看效果。</p>
<button id="btn">单击我</button>
<p id="para"></p>
<script>
document.getElementById("btn").addEventListener("click", fun);
function fun() {
  document.getElementById("para").innerHTML = "Hello World<br>Welcome to the javaTpoint.com";
}
</script>
</body>
</html>

输出

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

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

示例

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

<!DOCTYPE html>
<html>
<head>
<title>Javascript Events</title>
</head>
<body>
<p>这是向同一元素添加多个事件的示例。</p>
<p>单击以下按钮以查看效果。</p>
<button id="btn">单击我</button>
<p id="para"></p>
<p id="para1"></p>
<script>
function fun() {
  alert("欢迎访问 javaTpoint.com");
}

function fun1() {
  document.getElementById("para").innerHTML = "这是第二个函数";
}

function fun2() {
  document.getElementById("para1").innerHTML = "这是第三个函数";
}

var mybtn = document.getElementById("btn");
mybtn.addEventListener("click", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("click", fun2);
</script>
</body>
</html>

输出

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

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

示例

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

<!DOCTYPE html>
<html>
<head>
<title>Javascript Events</title>
</head>
<body>
<p>这是向同一元素添加多个不同类型事件的示例。</p>
<p>单击以下按钮以查看效果。</p>
<button id="btn">单击我</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 = "这是第二个函数";
}

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 元素和一个位于其中的段落元素，并且我们正在使用 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>冒泡</h1>
<div id="d1">
  这是一个 div 元素。<br><br>
  <span id="s1">这是一个 span 元素。</span>
</div>

<h1>捕获</h1>
<div id="d2">
  这是一个 div 元素。<br><br>
  <span id="s2">这是一个 span 元素。</span>
</div>

<script>
document.getElementById("d1").addEventListener("dblclick", function() {
  alert('你在 div 元素上双击了');
}, false);

document.getElementById("s1").addEventListener("dblclick", function() {
  alert('你在 span 元素上双击了');
}, false);

document.getElementById("d2").addEventListener("dblclick", function() {
  alert('你在 div 元素上双击了');
}, true);

document.getElementById("s2").addEventListener("dblclick", function() {
  alert('你在 span 元素上双击了');
}, true);
</script>
</body>
</html>

输出

我们需要双击特定元素才能看到效果。

JavaScript教程-JavaScript addEventListener()

语法

参数值

注意：不要在参数值中使用任何前缀，比如不要使用 "on"。例如，使用 "click" 而不是使用 "onclick"。

示例

示例

示例

事件冒泡或事件捕获

示例

推荐文章

其它