簡單來說，事件就是用戶或瀏覽器執行的某些動作，比如說點擊按鈕、移動鼠標、按下鍵盤等等。
通過捕獲事件之后處理事件，可以讓網頁對這些動作做出響應，進而實現更豐富的交互效果。
事件的類型
JavaScript 中事件的類型非常多，比較常用且典型的有以下幾種：
鼠標事件類：如 click（點擊）、dblclick（雙擊）、mouseover（鼠標移入）、mouseout（鼠標移出）等。
鍵盤事件類：如 keydown（按下鍵）、keyup（釋放鍵）等。
表單事件類：如 submit（提交表單）、change（表單元素值改變）等。
窗口事件類：如 load（頁面加載完成）、resize（窗口大小改變）等。
事件監聽
不用擔心事件太多，因為所有事件的處理都可以通過 addEventListener 方法來添加事件監聽器。
這個方法有三個參數：事件類型、事件處理函數和一個布爾值（表示是否在捕獲階段處理事件）。
// 添加事件監聽器 document.getElementById('myButton').addEventListener( 'click', function (event) { alert('按鈕被點擊了！'); }, false );
在上面的代碼中，我們給一個按鈕添加了 click 事件的監聽器。
當按鈕被點擊時，會彈出一個提示框。
第三個參數 false 表示在事件冒泡階段處理事件。
事件冒泡
事件冒泡指的是當一個事件發生在某個元素上時，這個事件會從最內層的目標元素開始，一層一層向上傳遞，直到最外層的元素。
這個過程就像水泡從水底冒到水面一樣，因此被稱為“事件冒泡”。
假設有一個嵌套的 HTML 結構，如下所示：
<div id="outer"> <div id="inner"> <button id="myButton">點擊我</button> </div> </div>
當我們點擊按鈕時，click 事件會首先在按鈕元素上觸發，然后依次向上傳遞到 inner 和 outer 元素，最后到達 document 對象。這就是事件冒泡的過程。
事件冒泡的示例
可以通過添加事件監聽器來觀察事件冒泡的過程：
<script> document.getElementById('outer').addEventListener('click', function () { console.log('外層 div 被點擊'); }); document.getElementById('inner').addEventListener('click', function () { console.log('內層 div 被點擊'); }); document.getElementById('myButton').addEventListener('click', function () { console.log('按鈕被點擊'); }); </script>
在這個示例中，當我們點擊按鈕時，控制臺會依次輸出：
按鈕被點擊 內層 div 被點擊 外層 div 被點擊
這說明事件從按鈕開始，依次向上傳遞到內層 div 和外層 div，也就是事件冒泡的過程。
阻止事件冒泡
當不希望事件冒泡到上層元素時，可以使用事件對象的 stopPropagation 方法來阻止事件冒泡：
document.getElementById('myButton').addEventListener('click', function (event) { event.stopPropagation(); console.log('按鈕被點擊'); });
在按鈕的點擊事件處理函數中調用了 event.stopPropagation 方法，這樣點擊按鈕時，事件就不會冒泡到內層和外層的 div 元素了。
事件捕獲
除了事件冒泡，還有一個相反的過程叫做事件捕獲。
事件捕獲是指事件從最外層的元素開始，一層一層向內傳遞，直到目標元素。
我們可以通過在 addEventListener 方法的第三個參數中傳遞 true 來啟用事件捕獲：
document.getElementById('outer').addEventListener( 'click', function () { console.log('外層 div 被點擊'); }, true ); document.getElementById('inner').addEventListener( 'click', function () { console.log('內層 div 被點擊'); }, true ); document.getElementById('myButton').addEventListener( 'click', function () { console.log('按鈕被點擊'); }, true );
在這個示例中，當我們點擊按鈕時，控制臺會依次輸出：
外層 div 被點擊 內層 div 被點擊 按鈕被點擊
移除事件監聽
可以使用 removeEventListener 方法來實現移除事件監聽，該方法的參數與 addEventListener 方法相同。
// 定義事件處理函數 function handleClick(event) { alert('按鈕被點擊了！'); } // 添加事件監聽器 document .getElementById('myButton') .addEventListener('click', handleClick, false); // 移除事件監聽器 document .getElementById('myButton') .removeEventListener('click', handleClick, false);
事件處理
如前面展開的描述，事件處理主要分為兩個階段：事件捕獲和事件冒泡。
事件對象
當事件發生時，瀏覽器會創建一個事件對象，并將其傳遞給事件處理函數。
通過這個事件對象，我們可以獲取事件的詳細信息，比如事件類型、目標元素、鼠標位置等。
document.getElementById('myButton').addEventListener('click', function (event) { console.log('事件類型：' + event.type); console.log('目標元素：' + event.target); console.log('鼠標位置：' + event.clientX + ', ' + event.clientY); });
通過事件對象 event 可以獲取事件的類型、目標元素和鼠標位置等信息。
事件處理的示例
來看一個完整的如何處理不同類型的事件的示例：
這個頁面有一個按鈕，一個輸入框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>事件處理示例</title> </head> <body> <button id="myButton">點擊我</button> <input type="text" id="myInput" placeholder="輸入文字" /> <script> // 處理點擊事件 document .getElementById('myButton') .addEventListener('click', function () { alert('按鈕被點擊了！'); }); // 處理鍵盤事件 document .getElementById('myInput') .addEventListener('keydown', function (event) { console.log('按下了鍵：' + event.key); }); // 處理表單事件 document .getElementById('myInput') .addEventListener('change', function () { console.log('輸入框的值改變了：' + this.value); }); </script> </body> </html>
分別處理了按鈕的點擊事件、輸入框的鍵盤事件和輸入框的值改變事件。
現在你也可以開始自己試試事件處理了！
總結
?? 事件就是用戶或瀏覽器執行的某些動作，比如說點擊按鈕、移動鼠標、按下鍵盤等等。
?? 所有事件的處理都可以通過 addEventListener 方法來添加事件監聽器。
?? 事件處理主要分為兩個階段：事件捕獲和事件冒泡。
該文章在 2024/10/23 9:41:28 編輯過
400 186 1886
