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