[Day19] JavaScript - DOM Event - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 19

Modern Web

JavaScript 基礎修練系列第 19 篇

[Day19] JavaScript - DOM Event

13th鐵人賽

yashienxxxx

2021-09-19 23:08:52

1362 瀏覽

分享至

使用者在瀏覽網頁時會觸發很多事件 (Events) 的發生，如點擊按鈕是一個滑鼠事件、輸入訊息是一個鍵盤事件、網頁或圖片完成下載時是一個事件、表單欄位值被改變也是一種事件等。

DOM Event 定義很多種事件型態，
讓我們可以用 JavaScript 來監聽 (listen) 和處理 (event handling) 這些事件:
https://www.w3schools.com/jsref/dom_obj_event.asp

我們可以使用三種方法來定義事件處理程序:

HTML元素屬性(Element Attribute)裡直接定義

不建議用此方式，因為事件處理程序是JavasScript程序，會不利於程式碼的維護

<html>
<body>

	<button onclick="alert('Hello world!')">Click me!</button>

</body>
</html>

或


<html>
<body>
	<button onclick="showAlert()">Click me!</button>

	<script>
		function showAlert() {
		alert("show function!")
	}
	</script>	

</body>
</html>

透過DOM屬性(Property)定義事件
在.js檔裡面定義 ⇒ 同一個元素只能有一個事件，否則會被覆蓋

<button id="myButton">Click me!</button>

function showAlert() {
    alert("show function!")
}

function secondAlert() {
    alert("show second function!")
}

let btn = document.getElementId("myButton");
btn.onclick = showAlert;     //會被secondAlert覆蓋 
btn.onclick = secondAlert;

透過監聽事件addEventListener定義
相較於 DOM 的方法，addEventListener 是可以對一個元素同時指定多個事件處理函數：

<button id="myButton">Click me!</button>

function showAlert() {
    alert("show function!")
}

function secondAlert() {
    alert("show second function!")
}

let btn = document.getElementById("myButton");
btn.addEventListener("click", showAlert);
btn.addEventListener("click", secondAlert);

使用addEventListener還有一個好處是，我們可以透過removeEventListener，以讓在程式運行時刪除事件處理程序。removeEventListeners和addEventListener傳遞的參數是一樣的，第一個參數放入"事件類型"，第二個參數放入"要刪除的事件"。

<button id="myButton">Click me!</button>

function showAlert() {
    alert("show function!")
}

function secondAlert() {
    alert("show second function!")
}

let btn = document.getElementById("myButton");
btn.addEventListener("click", showAlert);
btn.addEventListener("click", secondAlert);
btn.removeEventListener("click", showAlert);  //刪除事件處理程序