事件監聽：用戶交互的核心機制
在前端開發中，事件監聽是處理用戶交互的基礎機制。它允許我們檢測用戶的操作（如點擊、輸入、滾動等）并執行相應的代碼，讓網頁從靜態變為動態。
一、事件與事件監聽的基本概念
- 事件（Event）：指用戶在頁面上的操作或瀏覽器自身的狀態變化（如頁面加載完成、窗口大小改變）
- 事件監聽（Event Listener）：一種機制，讓程序 "等待" 特定事件發生，當事件發生時執行預設的處理函數
簡單來說：事件監聽就是 "當... 發生時，做..." 的邏輯實現。
二、常見的事件類型
1. 鼠標事件
click：鼠標點擊元素dblclick：鼠標雙擊元素mousedown：鼠標按下mouseup：鼠標松開mouseover：鼠標移入元素mouseout：鼠標移出元素mousemove：鼠標在元素上移動
2. 鍵盤事件
keydown：按下鍵盤按鍵keyup：松開鍵盤按鍵keypress：按下并釋放按鍵（已逐漸被棄用）
3. 表單事件
submit：表單提交change：表單元素值改變（如下拉框選擇變化）input：輸入框內容變化focus：元素獲得焦點blur：元素失去焦點
4. 窗口事件
load：頁面完全加載完成resize：窗口大小改變scroll：頁面滾動unload：頁面關閉或刷新
三、事件監聽的三種實現方式
1. HTML 屬性方式（不推薦）
直接在 HTML 標簽中通過on+事件名屬性定義：
html
預覽
<button onclick="handleClick()">點擊我</button><script>function handleClick() {alert('按鈕被點擊了');}
</script>
缺點：HTML 與 JavaScript 代碼混合，不利于維護。
2. DOM 屬性方式
通過 JavaScript 為 DOM 元素的事件屬性賦值：
html
預覽
<button id="myBtn">點擊我</button><script>const btn = document.getElementById('myBtn');btn.onclick = function() {alert('按鈕被點擊了');};// 可以覆蓋之前的事件處理btn.onclick = function() {alert('新的點擊處理');};
</script>
缺點：同一個事件只能綁定一個處理函數，新的會覆蓋舊的。
3. addEventListener () 方法（推薦）
使用 DOM 標準方法addEventListener()綁定事件：
html
預覽
<button id="myBtn">點擊我</button><script>const btn = document.getElementById('myBtn');// 綁定事件btn.addEventListener('click', function() {alert('第一次點擊處理');});// 可以綁定多個處理函數btn.addEventListener('click', function() {console.log('第二次點擊處理');});// 定義命名函數便于移除function handleClick() {console.log('命名函數處理');}btn.addEventListener('click', handleClick);// 移除事件監聽btn.removeEventListener('click', handleClick);
</script>
優點：
- 可以為同一事件綁定多個處理函數
- 可以方便地移除事件監聽
- 可以指定事件捕獲 / 冒泡階段
四、事件對象（Event Object）
當事件發生時，瀏覽器會自動創建一個事件對象，包含事件相關的詳細信息，并作為參數傳遞給事件處理函數：
javascript
運行
btn.addEventListener('click', function(event) {// event 就是事件對象console.log('事件類型:', event.type); // "click"console.log('觸發元素:', event.target); // 觸發事件的元素console.log('當前元素:', event.currentTarget); // 綁定事件的元素console.log('鼠標X坐標:', event.clientX); // 相對于視口的X坐標console.log('鼠標Y坐標:', event.clientY); // 相對于視口的Y坐標
});
常用屬性：
type：事件類型（如 "click"）target：觸發事件的原始元素currentTarget：當前處理事件的元素（通常與this相同）preventDefault()：阻止事件的默認行為（如鏈接跳轉、表單提交）stopPropagation()：阻止事件冒泡
五、事件流：捕獲與冒泡
DOM 事件流分為三個階段：
- 捕獲階段：事件從 window 向下傳播到目標元素
- 目標階段：事件到達目標元素
- 冒泡階段：事件從目標元素向上傳播回 window
html
預覽
<div id="outer"><div id="inner">點擊我</div>
</div><script>const outer = document.getElementById('outer');const inner = document.getElementById('inner');// 第三個參數為true表示在捕獲階段處理outer.addEventListener('click', () => console.log('outer捕獲'), true);inner.addEventListener('click', () => console.log('inner目標'));outer.addEventListener('click', () => console.log('outer冒泡'), false);
</script>
點擊 inner 元素會輸出：
outer捕獲
inner目標
outer冒泡
六、事件委托（事件代理）
利用事件冒泡機制，將子元素的事件委托給父元素處理：
html
預覽
<ul id="myList"><li>項目1</li><li>項目2</li><li>項目3</li>
</ul><script>const list = document.getElementById('myList');// 只給父元素綁定一次事件list.addEventListener('click', function(event) {// 判斷點擊的是li元素if (event.target.tagName === 'LI') {console.log('點擊了:', event.target.textContent);}});
</script>
優點：
- 減少事件綁定數量，提高性能
- 自動支持動態添加的子元素
七、實際應用示例
綜合運用事件監聽實現一個簡單的交互功能：
html
預覽
<div class="counter"><button class="decrease">-</button><span class="value">0</span><button class="increase">+</button>
</div><script>const decreaseBtn = document.querySelector('.decrease');const increaseBtn = document.querySelector('.increase');const valueSpan = document.querySelector('.value');let count = 0;// 定義處理函數function updateValue() {valueSpan.textContent = count;}// 綁定事件decreaseBtn.addEventListener('click', () => {count--;updateValue();});increaseBtn.addEventListener('click', () => {count++;updateValue();});// 支持鍵盤操作document.addEventListener('keydown', (event) => {if (event.key === '+') {count++;updateValue();} else if (event.key === '-') {count--;updateValue();}});
</script>
總結
事件監聽是前端交互的核心，掌握以下幾點：
- 理解事件的概念和常見事件類型
- 推薦使用
addEventListener()方法綁定事件 - 學會使用事件對象獲取事件信息和控制事件行為
- 理解事件流的捕獲和冒泡機制
- 掌握事件委托技巧提高性能
)
