九個(gè)你應(yīng)該知道的 JavaScript 事件
JavaScript 事件是前端開(kāi)發(fā)中用戶交互的基石。從鼠標(biāo)點(diǎn)擊到鍵盤(pán)輸入、觸摸屏操作到頁(yè)面滾動(dòng)，事件監(jiān)聽(tīng)器可幫助開(kāi)發(fā)人員捕捉用戶行為并做出相應(yīng)響應(yīng)。
本文探討了 9 個(gè) JavaScript 事件，提供了實(shí)際示例和見(jiàn)解，以增強(qiáng)您的 Web 開(kāi)發(fā)技能。
1. 鼠標(biāo)事件
鼠標(biāo)事件是網(wǎng)頁(yè)上用戶交互的基礎(chǔ)。讓我們探索一些最常用的鼠標(biāo)事件：
點(diǎn)擊
當(dāng)在元素上按下并釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā)點(diǎn)擊事件。
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});雙擊
雙擊元素時(shí)會(huì)觸發(fā) dblclick 事件。
document.getElementById("myButton").addEventListener("dblclick", function() {
alert("Button double-clicked!");
});Mousedown 和 Mouseup
當(dāng)鼠標(biāo)按鈕在元素上被按下 (mousedown) 和釋放 (mouseup) 時(shí)，會(huì)觸發(fā)這些事件。
document.getElementById("myButton").addEventListener("mousedown", function() {
console.log("Mouse button pressed!");
});
document.getElementById("myButton").addEventListener("mouseup", function() {
console.log("Mouse button released!");
});Mouseover 和 Mouseout 當(dāng)鼠標(biāo)指針進(jìn)入（mouseover）或離開(kāi)（mouseout）元素時(shí)，這些事件會(huì)觸發(fā)。
document.getElementById("myButton").addEventListener("mouseover", function() {
this.style.backgroundColor = "yellow";
});
document.getElementById("myButton").addEventListener("mouseout", function() {
this.style.backgroundColor = "";
});2. 鍵盤(pán)事件
鍵盤(pán)事件對(duì)于通過(guò)鍵盤(pán)捕獲用戶輸入至關(guān)重要。
Keydown 和 Keyup
當(dāng)按下（keydown）或釋放（keyup）鍵時(shí)，會(huì)觸發(fā)這些事件。
document.addEventListener("keydown", function(event) {
console.log(`Key pressed: ${event.key}`);
});
document.addEventListener("keyup", function(event) {
console.log(`Key released: ${event.key}`);
});Keypress（已棄用）
按下字符鍵時(shí)會(huì)觸發(fā) keypress 事件。不過(guò)，該事件已被棄用，取而代之的是 keydown 和 keyup。
document.addEventListener("keypress", function(event) {
console.log(`Character key pressed: ${event.key}`);
});3. 觸摸事件
觸摸事件對(duì)于移動(dòng)設(shè)備和觸摸屏設(shè)備至關(guān)重要。
Touchstart、Touchmove 和 Touchend
這些事件捕獲觸摸交互的開(kāi)始、移動(dòng)和結(jié)束。
document.getElementById("touchArea").addEventListener("touchstart", function() {
console.log("Touch started.");
});
document.getElementById("touchArea").addEventListener("touchmove", function() {
console.log("Touch moving.");
});
document.getElementById("touchArea").addEventListener("touchend", function() {
console.log("Touch ended.");
});4. 表單事件
表單事件對(duì)于處理用戶輸入和表單提交至關(guān)重要。
提交
提交表單時(shí)會(huì)觸發(fā)提交事件。
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form submission
alert("Form submitted!");
});更改和輸入
當(dāng)表單元素的值發(fā)生更改時(shí)，會(huì)觸發(fā)更改事件，而當(dāng)輸入字段的值發(fā)生更改時(shí)，會(huì)立即觸發(fā)輸入事件。
document.getElementById("myInput").addEventListener("change", function() {
console.log("Input value changed.");
});
document.getElementById("myInput").addEventListener("input", function() {
console.log(`Current input value: ${this.value}`);
});5. 文檔/窗口事件
這些事件與整個(gè)文檔或?yàn)g覽器窗口相關(guān)。
加載
當(dāng)頁(yè)面及其所有資源加載完成后，將觸發(fā)加載事件。
window.addEventListener("load", function() {
console.log("Page loaded and all resources are ready.");
});滾動(dòng)和調(diào)整大小
當(dāng)頁(yè)面滾動(dòng)或窗口調(diào)整大小時(shí)會(huì)觸發(fā)這些事件。
window.addEventListener("scroll", function() {
console.log("Page is scrolling.");
});
window.addEventListener("resize", function() {
console.log("Window resized.");
});Beforeunload
當(dāng)用戶試圖離開(kāi)頁(yè)面時(shí)，會(huì)觸發(fā)此事件。
window.addEventListener("beforeunload", function(event) {
event.preventDefault(); // Cancel the event
event.returnValue = "Are you sure you want to leave?";
});6. 焦點(diǎn)事件
焦點(diǎn)事件對(duì)于管理用戶對(duì)表單元素的注意力非常重要。
焦點(diǎn)和模糊
當(dāng)元素獲得（焦點(diǎn)）或失去（模糊）焦點(diǎn)時(shí)，會(huì)觸發(fā)這些事件。
document.getElementById("myInput").addEventListener("focus", function() {
console.log("Input field focused.");
});
document.getElementById("myInput").addEventListener("blur", function() {
console.log("Input field lost focus.");
});7. 拖放事件
拖放事件可實(shí)現(xiàn)交互式用戶體驗(yàn)。
Dragstart、Dragover 和 Drop
這些事件處理拖動(dòng)的開(kāi)始、拖過(guò)放置區(qū)域以及放置元素。
document.getElementById("dragItem").addEventListener("dragstart", function(event) {
console.log("Drag started.");
event.dataTransfer.setData("text", event.target.id);
});
document.getElementById("dropZone").addEventListener("dragover", function(event) {
event.preventDefault(); // Allow drop
console.log("Drag over drop zone.");
});
document.getElementById("dropZone").addEventListener("drop", function(event) {
event.preventDefault(); // Prevent default action
const data = event.dataTransfer.getData("text");
console.log("Dropped element ID: " + data);
});8. 動(dòng)畫(huà)事件
動(dòng)畫(huà)事件對(duì)于控制 CSS 動(dòng)畫(huà)非常有用。
Animationstart 和 Animationend
這些事件在 CSS 動(dòng)畫(huà)開(kāi)始和結(jié)束時(shí)觸發(fā)。
document.getElementById("animatedElement").addEventListener("animationstart", function() {
console.log("Animation started!");
});
document.getElementById("animatedElement").addEventListener("animationend", function() {
console.log("Animation ended!");
});9. 過(guò)渡事件
過(guò)渡事件有助于管理 CSS 過(guò)渡。
Transitionend
當(dāng) CSS 過(guò)渡完成時(shí)，會(huì)觸發(fā)此事件。
document.getElementById("transitionElement").addEventListener("transitionend", function() {
console.log("Transition ended.");
});結(jié)論
JavaScript 事件為開(kāi)發(fā)人員提供了強(qiáng)大的工具來(lái)創(chuàng)建動(dòng)態(tài)、響應(yīng)迅速的用戶體驗(yàn)。
從簡(jiǎn)單的鼠標(biāo)點(diǎn)擊到復(fù)雜的拖放操作，了解這些事件對(duì)于任何前端開(kāi)發(fā)人員來(lái)說(shuō)都至關(guān)重要。
通過(guò)掌握這些事件類(lèi)型并有效地實(shí)現(xiàn)它們，您可以顯著增強(qiáng) Web 應(yīng)用程序的交互性和響應(yīng)能力。
請(qǐng)記住為您的特定用例選擇正確的事件，并在附加多個(gè)事件偵聽(tīng)器時(shí)始終考慮性能影響。
最后，感謝您的閱讀，祝編程愉快！
