簡(jiǎn)單來(lái)說(shuō)，事件就是用戶或?yàn)g覽器執(zhí)行的某些動(dòng)作，比如說(shuō)點(diǎn)擊按鈕、移動(dòng)鼠標(biāo)、按下鍵盤等等。
通過(guò)捕獲事件之后處理事件，可以讓網(wǎng)頁(yè)對(duì)這些動(dò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（頁(yè)面加載完成）、resize（窗口大小改變）等。
事件監(jiān)聽
不用擔(dān)心事件太多，因?yàn)樗惺录奶幚矶伎梢酝ㄟ^(guò) addEventListener 方法來(lái)添加事件監(jiān)聽器。
這個(gè)方法有三個(gè)參數(shù)：事件類型、事件處理函數(shù)和一個(gè)布爾值（表示是否在捕獲階段處理事件）。
// 添加事件監(jiān)聽器 document.getElementById('myButton').addEventListener( 'click', function (event) { alert('按鈕被點(diǎn)擊了！'); }, false );
在上面的代碼中，我們給一個(gè)按鈕添加了 click 事件的監(jiān)聽器。
當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)彈出一個(gè)提示框。
第三個(gè)參數(shù) false 表示在事件冒泡階段處理事件。
事件冒泡
事件冒泡指的是當(dāng)一個(gè)事件發(fā)生在某個(gè)元素上時(shí)，這個(gè)事件會(huì)從最內(nèi)層的目標(biāo)元素開始，一層一層向上傳遞，直到最外層的元素。
這個(gè)過(guò)程就像水泡從水底冒到水面一樣，因此被稱為“事件冒泡”。
假設(shè)有一個(gè)嵌套的 HTML 結(jié)構(gòu)，如下所示：
<div id="outer"> <div id="inner"> <button id="myButton">點(diǎn)擊我</button> </div> </div>
當(dāng)我們點(diǎn)擊按鈕時(shí)，click 事件會(huì)首先在按鈕元素上觸發(fā)，然后依次向上傳遞到 inner 和 outer 元素，最后到達(dá) document 對(duì)象。這就是事件冒泡的過(guò)程。
事件冒泡的示例
可以通過(guò)添加事件監(jiān)聽器來(lái)觀察事件冒泡的過(guò)程：
<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>
在這個(gè)示例中，當(dāng)我們點(diǎn)擊按鈕時(shí)，控制臺(tái)會(huì)依次輸出：
按鈕被點(diǎn)擊 內(nèi)層 div 被點(diǎn)擊 外層 div 被點(diǎn)擊
這說(shuō)明事件從按鈕開始，依次向上傳遞到內(nèi)層 div 和外層 div，也就是事件冒泡的過(guò)程。
阻止事件冒泡
當(dāng)不希望事件冒泡到上層元素時(shí)，可以使用事件對(duì)象的 stopPropagation 方法來(lái)阻止事件冒泡：
document.getElementById('myButton').addEventListener('click', function (event) { event.stopPropagation(); console.log('按鈕被點(diǎn)擊'); });
在按鈕的點(diǎn)擊事件處理函數(shù)中調(diào)用了 event.stopPropagation 方法，這樣點(diǎn)擊按鈕時(shí)，事件就不會(huì)冒泡到內(nèi)層和外層的 div 元素了。
事件捕獲
除了事件冒泡，還有一個(gè)相反的過(guò)程叫做事件捕獲。
事件捕獲是指事件從最外層的元素開始，一層一層向內(nèi)傳遞，直到目標(biāo)元素。
我們可以通過(guò)在 addEventListener 方法的第三個(gè)參數(shù)中傳遞 true 來(lái)啟用事件捕獲：
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 );
在這個(gè)示例中，當(dāng)我們點(diǎn)擊按鈕時(shí)，控制臺(tái)會(huì)依次輸出：
外層 div 被點(diǎn)擊 內(nèi)層 div 被點(diǎn)擊 按鈕被點(diǎn)擊
移除事件監(jiān)聽
可以使用 removeEventListener 方法來(lái)實(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);
事件處理
如前面展開的描述，事件處理主要分為兩個(gè)階段：事件捕獲和事件冒泡。
事件對(duì)象
當(dāng)事件發(fā)生時(shí)，瀏覽器會(huì)創(chuàng)建一個(gè)事件對(duì)象，并將其傳遞給事件處理函數(shù)。
通過(guò)這個(gè)事件對(duì)象，我們可以獲取事件的詳細(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); });
通過(guò)事件對(duì)象 event 可以獲取事件的類型、目標(biāo)元素和鼠標(biāo)位置等信息。
事件處理的示例
來(lái)看一個(gè)完整的如何處理不同類型的事件的示例：
這個(gè)頁(yè)面有一個(gè)按鈕，一個(gè)輸入框。
<!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í)行的某些動(dòng)作，比如說(shuō)點(diǎn)擊按鈕、移動(dòng)鼠標(biāo)、按下鍵盤等等。
?? 所有事件的處理都可以通過(guò) addEventListener 方法來(lái)添加事件監(jiān)聽器。
?? 事件處理主要分為兩個(gè)階段：事件捕獲和事件冒泡。
該文章在 2024/10/23 9:41:28 編輯過(guò)
400 186 1886
