5.1 事件處理基礎
JavaScript 的事件允許你和用戶互動，對用戶的操作作出響應，比如滑鼠點擊、按鍵、表單變更等等。了解如何添加和刪除事件處理器是開發互動式網頁應用程式的重要部分。
什麼是事件？
事件是瀏覽器發出的信號，通知你某件事情發生了。比如用戶點擊了一個按鈕或者網頁加載完畢。事件允許根據這些信號執行特定操作。
事件類型
事件有很多種。以下是常用的一些：
- 滑鼠:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - 鍵盤:
keydown,keyup,keypress - 表單:
submit,change,focus,blur - 文件/窗口:
load,resize,scroll,unload
事件處理器
事件處理器（或事件監聽器）是響應某個事件而執行的函數。它們「監聽」特定事件，當事件發生時被觸發。
5.2 添加事件處理器
使用 addEventListener 添加事件處理器
addEventListener 方法允許將事件處理器添加到元素上。與使用 HTML 屬性（onclick、onchange 等）相比，它提供了更大的靈活性和控制。
語法：
element.addEventListener(event, handler, options);
其中：
element: 添加事件處理器的元素event: 需要響應的事件類型（例如 'click', 'input', 'keydown'）handler: 事件發生時會被調用的函數options: 附加參數（可選）
範例：添加 click 事件處理器
在這個例子中，我們為一個按鈕添加了一個事件處理器。當用戶點擊按鈕時，會彈出一個通知消息。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
範例：添加多個事件處理器
使用 addEventListener 可以為一個事件添加多個處理器。
在這個例子中，兩個事件處理器被添加到一個按鈕上。點擊時，兩個處理器會按順序執行，並在控制台中顯示相應的消息。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
</script>
</body>
</html>
5.3 使用 options 參數
options 參數允許配置事件處理器的行為。常用的選項有：
once: 如果為true，處理器只會被調用一次，隨後自動移除capture: 如果為true，事件會在捕獲階段處理而不是冒泡階段passive: 如果為true，表示處理器不會調用preventDefault()
範例：僅執行一次的處理器
在這個例子中，事件處理器只會執行一次，然後自動被移除。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('This will be shown only once');
}, { once: true });
</script>
</body>
</html>
5.4 移除事件處理器
使用 removeEventListener 移除事件處理器
removeEventListener 方法可以移除使用 addEventListener 添加的事件處理器。需要傳入與添加處理器時相同的參數。
語法：
element.removeEventListener(event, handler, options)
其中：
element: 要移除事件處理器的元素event: 要移除的事件類型的處理器handler: 被設為事件處理器的函數options: 附加參數（需與添加處理器時使用的參數匹配）
範例：移除 click 事件處理器
在這個例子中，一個 click 事件處理器被添加到按鈕上。點擊另一個按鈕會移除 click 事件處理器。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Button clicked!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click handler removed');
});
</script>
</body>
</html>
GO TO FULL VERSION