数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 中 addEventListener 和 onclick 的区别
**addEventListener** 和 **onclick** 事件都用于监听事件。这两个事件方法都会记录事件，并在每次点击按钮时根据该事件执行函数。尽管两者之间存在差异，但它们的工作原理是相似的。
在本文中，我们将探讨 JavaScript 中 addEventListener 和 onclick 函数之间的区别。
1. addEventListener
addEventListener 方法使用事件处理程序将其附加到指定的元素。
语法
element.addEventListener(event, listener, useCapture);
参数
**event** - 事件可以定义为任何有效的 JavaScript 事件。事件通常在不使用 on 前缀的情况下使用（如 onclick 方法中所用）。
**Listener（处理程序函数）** - 这定义了一个 JavaScript 函数，用于响应发生的事件。
**useCapture（可选参数）** - 这是一个可选参数，它接受一个可选值，指定事件是在捕获阶段还是冒泡阶段执行。
示例 1
下面的示例程序显示了 **addEventListener** 方法可以支持应用于同一元素的多个事件处理程序。
# index.html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<button id="btn">Click here</button>
<h3 id="text1"></h3>
<h3 id="text2"></h3>
<script>
let btn_element = document.getElementById("btn");
btn_element.addEventListener("click", () => {
document.getElementById("text1")
.innerHTML = "Executed Task 1";
})
btn_element.addEventListener("click", () => {
document.getElementById("text2")
.innerHTML = "Executed Task 2";
});
</script>
</body>
</html>输出
当您单击“点击此处”按钮时，它将显示“已执行任务 1”、“已执行任务 2”。
2. onClick()
onClick() 事件捕获点击事件，然后调用所需的函数。onClick 事件仅向元素添加单个事件。
示例 2
下面的示例程序显示了我们无法通过 onClick() 控制事件传播。此外，它可以作为 HTML 属性添加。
# filter.js
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<button id="btn">Click here</button>
<h3 id="text1"></h3>
<h3 id="text2"></h3>
<script>
let btn_element = document.getElementById("btn");
btn_element.onclick = () => {
document.getElementById("text1")
.innerHTML = "Executed Task 1";
};
btn_element.onclick = () => {
document.getElementById("text2")
.innerHTML = "Executed Task 2";
};
</script>
</body>
</html>输出
当您单击“点击此处”按钮时，它将显示“已执行任务 2”。
更新于： 2022-04-21
1K+ 阅读量
广告