vb2010做網(wǎng)站企業(yè)營銷網(wǎng)站建設(shè)系統(tǒng)
JavaScript青少年簡明教程：事件及處理
在編程語言中，事件（Event）是一種使程序能夠響應(yīng)特定操作或條件發(fā)生的機(jī)制。它允許程序中的不同部分（比如對象、類或模塊）在發(fā)生某些特定情況時互相通信或協(xié)作。事件驅(qū)動編程（Event-driven programming）是一種基于事件的編程范式，它依賴于事件和回調(diào)函數(shù)（或監(jiān)聽器）來處理或響應(yīng)這些事件。
事件的基本組成部分
- 事件源（Event Source）：產(chǎn)生事件的實體或?qū)ο?。例?#xff0c;在網(wǎng)頁上，一個按鈕點(diǎn)擊事件的事件源就是該按鈕。
- 事件（Event）：具體發(fā)生的情況或動作，通常包含有關(guān)該動作的一些信息（如發(fā)生的時間、位置等）。在事件處理中，事件本身通常被封裝成一個對象，這個對象包含了事件的詳細(xì)信息。
- 事件處理器（Event Handler）：是當(dāng)事件發(fā)生時被調(diào)用的函數(shù)或方法。它定義了當(dāng)事件發(fā)生時應(yīng)該執(zhí)行的動作。
網(wǎng)頁上發(fā)生的事情或用戶行為，如點(diǎn)擊按鈕、輸入文本、移動鼠標(biāo)等都是事件。JavaScript能夠監(jiān)聽這些事件并根據(jù)事件執(zhí)行相應(yīng)的代碼，從而使網(wǎng)頁能夠?qū)τ脩舨僮髯鞒龇磻?yīng)。
常見的JavaScript事件類型
- 鼠標(biāo)事件：如click（點(diǎn)擊）、dblclick（雙擊）、mouseover（鼠標(biāo)懸停）、mouseout（鼠標(biāo)移出）、mousedown（鼠標(biāo)按下）、mouseup（鼠標(biāo)松開）等。
- 鍵盤事件：如keydown（鍵盤按鍵按下）、keyup（鍵盤按鍵釋放）、keypress（字符鍵被按下）。
- 表單事件：如submit（表單提交）、change（表單字段變化）、focus（獲得焦點(diǎn)）、blur（失去焦點(diǎn)）。
- 窗口事件：如load（頁面加載完成）、resize（窗口大小改變）、scroll（滾動窗口）。
- 觸摸事件：針對移動設(shè)備，如touchstart、touchmove、touchend、touchcancel。
事件處理方式
JavaScript處理事件的方式主要有兩種：通過HTML屬性添加事件處理程序和使用JavaScript添加事件監(jiān)聽器。
1) HTML屬性： 在HTML元素中直接使用事件屬性添加事件處理代碼，如：
<button οnclick="alert('Hello World')">點(diǎn)擊我</button>
這種方法簡單直接，它使HTML和JavaScript的代碼耦合度增高，不易于維護(hù)。
2) JavaScript事件監(jiān)聽器（Event Listener）： 使用addEventListener方法可以在JavaScript代碼中添加事件處理程序，這樣可以將行為（JavaScript）與結(jié)構(gòu)（HTML）分離，提高代碼的可維護(hù)性。示例：
document.getElementById("myButton").addEventListener("click", function() { alert("Hello World"); });
這種方法更加靈活，允許為一個事件添加多個監(jiān)聽器，且可以更容易地控制監(jiān)聽器的移除。
事件傳播
事件在DOM中的傳播有兩個階段：捕獲階段和冒泡階段。
- 捕獲階段：事件從文檔根節(jié)點(diǎn)沿DOM樹向下傳遞到事件目標(biāo)的過程。
- 冒泡階段：事件從事件目標(biāo)沿DOM樹向上回傳到文檔根節(jié)點(diǎn)的過程。
默認(rèn)情況下，事件處理程序只在冒泡階段執(zhí)行，但可以通過addEventListener的第三個參數(shù)設(shè)置為true，使處理程序在捕獲階段執(zhí)行。
事件監(jiān)聽器
事件監(jiān)聽器（Event Listener）是 JavaScript 中處理用戶交互和異步操作的重要機(jī)制。它們允許開發(fā)者響應(yīng)用戶的操作（如點(diǎn)擊、輸入、鼠標(biāo)移動等）以及其他異步事件（如網(wǎng)絡(luò)請求、定時器等）。事件監(jiān)聽器是實現(xiàn)動態(tài)和互動 Web 應(yīng)用程序的關(guān)鍵工具。
addEventListener 方法是 JavaScript 中最常用的事件綁定方式。它允許你將事件監(jiān)聽器附加到 DOM 元素上，并指定事件類型和回調(diào)函數(shù)。語法：
元素對象.addEventListener('事件類型'，要執(zhí)行的函數(shù))
事件監(jiān)聽器三要素：
事件目標(biāo)(Event Target)：哪個DOM元素對象觸發(fā)了事件。
事件類型(Event Type)：觸發(fā)事件的方式，也稱為觸發(fā)事件的事件名稱，比如鼠標(biāo)單擊click、鼠標(biāo)經(jīng)過mouseover等。
事件處理函數(shù)(Event Handler)：實現(xiàn)要做什么事情的函數(shù)。這個函數(shù)包含了事件發(fā)生時要執(zhí)行的操作。
注意：事件類型要加引號，函數(shù)是點(diǎn)擊之后再去執(zhí)行，每次點(diǎn)擊都會執(zhí)行一次。
例如，響應(yīng)用戶的點(diǎn)擊按鈕操作：
<button id="myButton">Click Me!</button>
<script>// 首先，定義事件處理函數(shù)function handleClick() {alert('按鈕被點(diǎn)擊');}// 為按鈕添加事件監(jiān)聽器
document.getElementById("myButton").addEventListener("click", function);
</script>
移除事件監(jiān)聽器
當(dāng)不再需要監(jiān)聽某個事件時，應(yīng)當(dāng)移除對應(yīng)的事件監(jiān)聽器，以避免可能的內(nèi)存泄漏和性能問題。
可以使用removeEventListener方法將其移除。
這個方法需要與addEventListener使用相同的參數(shù)，包括事件類型、事件處理函數(shù)和用于指定事件是否在捕獲階段觸發(fā)的選項（可選）。
// 當(dāng)需要移除事件監(jiān)聽器時
document.getElementById("myButton").removeEventListener('click', function);
注意事項
1.確保函數(shù)相同：removeEventListener需要引用相同的函數(shù)。如果你在addEventListener時使用了匿名函數(shù)，那么你需要保持這個函數(shù)的引用，以便后終使用removeEventListener。如果直接傳遞一個新的函數(shù)或匿名函數(shù)，將無法正確移除監(jiān)聽器。
2.捕獲與冒泡：如果在添加事件監(jiān)聽器時指定了事件處理程序在捕獲階段執(zhí)行（即第三個參數(shù)為true），則在移除時也需要指定相同的參數(shù)。
3.重復(fù)移除：多次調(diào)用removeEventListener對同一個監(jiān)聽器沒有副作用，但只有第一次調(diào)用會實際移除監(jiān)聽器。
例、這個例子展示了幾種不同的事件處理方式：
使用HTML屬性直接綁定事件（如onclick, onmouseover）
使用JavaScript的addEventListener方法添加事件監(jiān)聽器
源碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML事件處理示例</title><style>body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }.example { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; }#hoverDiv { background-color: lightblue; padding: 10px; }</style>
</head>
<body><h2>HTML事件處理示例</h2><div class="example"><h3>1. 點(diǎn)擊事件 (onclick)</h3><button onclick="showMessage()">點(diǎn)擊我</button></div><div class="example"><h3>2. 鼠標(biāo)懸停事件 (onmouseover/onmouseout)，請留意顏色變化</h3><div id="hoverDiv" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightblue'">將鼠標(biāo)懸停在此處</div></div><div class="example"><h3>3. 鍵盤事件 (onkeyup)</h3><input type="text" id="keyInput" onkeyup="document.getElementById('keyOutput').textContent = this.value"><p>你輸入的是: <span id="keyOutput"></span></p></div><div class="example"><h3>4. 表單提交事件 (onsubmit)</h3><form onsubmit="event.preventDefault(); alert('表單已提交');"><input type="text" placeholder="輸入些什么..."><button type="submit">提交</button></form></div><script>function showMessage() { alert('按鈕被點(diǎn)擊了——使用onclick屬性響應(yīng)!'); } // 使用 addEventListener 添加點(diǎn)擊事件監(jiān)聽器document.querySelector('button').addEventListener('click', function() {alert('按鈕被點(diǎn)擊了——使用 addEventListener方式響應(yīng)!');});</script>
</body>
</html>
這個示例包含了幾個常見的事件處理：
1)點(diǎn)擊事件 (onclick):
使用內(nèi)聯(lián)的onclick屬性和addEventListener方法兩種方式演示。
2)鼠標(biāo)懸停事件 (onmouseover/onmouseout):
當(dāng)鼠標(biāo)懸停在div上時改變背景顏色。
3)鍵盤事件 (onkeyup):
在輸入框中輸入文字時,實時顯示輸入的內(nèi)容。
4)表單提交事件 (onsubmit):
阻止表單的默認(rèn)提交行為,而是顯示一個提交成功的提示。
進(jìn)一步學(xué)習(xí)，可參考：
JS的事件介紹 https://blog.csdn.net/cnds123/article/details/127103830
JS捕獲頁面按鍵事件 https://blog.csdn.net/cnds123/article/details/122136978
JavaScript事件示例 https://blog.csdn.net/cnds123/article/details/120530675