6.1 事件物件
JavaScript 提供強大的事件系統，可以用來追蹤使用者動作和其他在瀏覽器中發生的事件。處理事件的一個重要部分是事件物件，它包含事件的資訊並提供方法來處理它。
當事件發生時，瀏覽器會創建事件物件，這個物件包含有關該事件的資訊。這個物件作為參數傳遞給事件處理器。
事件物件的屬性：
type: 事件類型 (例如，click,keydown)。target: 發生事件的元素。currentTarget: 綁定事件處理器的元素。eventPhase: 事件所在的階段（捕獲、目標、冒泡）。bubbles: 布林值，表示事件是否可以冒泡。cancelable: 布林值，表示事件是否可以取消。defaultPrevented: 布林值，表示是否已阻止預設行為。timeStamp: 創建事件的時間。isTrusted: 布林值，表示事件是否由使用者或腳本觸發。
事件物件的方法：
preventDefault(): 取消與事件相關的預設行為。stopPropagation(): 停止事件的進一步傳播。stopImmediatePropagation(): 停止事件的進一步傳播並防止當前元素的其他事件處理器執行。
事件物件的使用範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // 會輸出: click
console.log('Event target:', event.target); // 會輸出: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // 會輸出: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // 會輸出: 2 (目標階段)
console.log('Bubbles:', event.bubbles); // 會輸出: true
console.log('Cancelable:', event.cancelable); // 會輸出: true
console.log('Time stamp:', event.timeStamp); // 會輸出時間（毫秒）
console.log('Is trusted:', event.isTrusted); // 會輸出: true
});
</script>
</body>
</html>
6.2. 點擊事件 (Mouse Events)
滑鼠事件是在使用者使用滑鼠與元素互動時產生的：
click: 單次點擊事件dblclick: 雙擊事件mousedown: 按下滑鼠鍵事件mouseup: 釋放滑鼠鍵事件mousemove: 滑鼠移動事件mouseover: 滑鼠懸停事件mouseout: 滑鼠移開事件
範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 加載事件 (Load Events)
加載事件發生在資源完成加載時：
load: 當資源/頁面完全加載時發生的事件DOMContentLoaded: 當初始的 HTML 文檔被加載並解析，而不等待樣式表、圖像和子框架完全加載時發生的事件
範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 焦點事件 (Focus Events)
焦點事件是在元素獲得或失去焦點時產生的事件。
focus: 當元素獲得焦點時發生的事件blur: 當元素失去焦點時發生的事件
範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 鍵盤事件 (Keyboard Events)
鍵盤事件是在使用者按下鍵盤上的按鍵時產生的事件：
keydown: 當按鍵被按下時發生的事件keyup: 當按鍵被釋放時發生的事件keypress: 當按鍵被按下和釋放時發生的事件（已過時的事件，不推薦使用）
範例：
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION