資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
廣告