HTML5 – 事件
HTML5 為 Web 應用程序提供了更多的事件類型及更強大的事件處理機制。愛掏網 - it200.com這些事件可以輕松地添加到 HTML 元素中，用于監聽用戶操作，提供響應交互式界面的能力。愛掏網 - it200.com
常見的 HTML5 事件類型有以下幾種：
- Click – 鼠標點擊事件
- Keydown – 鍵盤按下事件
- Mouseover – 鼠標懸停事件
- Load – 頁面加載事件
- Submit – 表單提交事件
- Change – 表單元素值變化事件
- Focus – 元素聚焦事件
- Blur – 元素失焦事件
- Resume – 應用從后臺恢復事件
- Offline/Online – 離線/在線切換事件
事件處理程序是指在 HTML 元素上注冊相應事件的 JavaScript 函數，也稱為事件監聽器。愛掏網 - it200.com以下是注冊事件處理程序的兩種基本方式：
HTML 屬性
<button onclick="alert('Hello World!')">Click Me</button>
在 HTML 元素中通過 on + 事件名 來注冊相應事件的處理程序。愛掏網 - it200.com在此例中，點擊該按鈕時，將彈出一個對話框窗口，顯示“Hello World!”。愛掏網 - it200.com
DOM 元素屬性
var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
alert("Hello World!");
});
使用 JavaScript 獲取元素，并調用 addEventListener 注冊事件處理程序。愛掏網 - it200.com在此例中，點擊該按鈕時，將同樣彈出一個對話框窗口，顯示“Hello World!”。愛掏網 - it200.com
我們強烈建議采用第二種方式，因為它將 HTML 和 JavaScript 代碼正確分離，避免了 HTML 中過多的 JavaScript 代碼，使得代碼可維護性更高。愛掏網 - it200.com
事件對象
當一個事件被觸發時，會自動創建一個事件對象。愛掏網 - it200.com事件對象包含著與事件相關的信息，可以通過事件監聽器（即事件處理程序）的參數進行訪問。愛掏網 - it200.com
以下是一些常見的事件對象屬性：
event.target– 返回事件源對象event.type– 返回觸發事件的事件類型event.timeStamp– 返回事件發生的時間戳event.preventDefault()– 阻止事件默認行為event.stopPropagation()– 阻止事件冒泡
以下是一個完整的事件處理程序示例：
var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
console.log(`Target: {event.target}`);
console.log(`Type:{event.type}`);
console.log(`TimeStamp: ${event.timeStamp}`);
event.preventDefault();
event.stopPropagation();
});
在此例中，當點擊按鈕時，事件處理程序將輸出 Target: [object HTMLButtonElement]、Type: click 和一個時間戳。愛掏網 - it200.com此外，我們還調用了 preventDefault 和 stopPropagation 方法分別阻止了事件的默認行為和事件的冒泡。愛掏網 - it200.com
結論
HTML5 事件提供了一種響應用戶操作的交互式界面的強大方法。愛掏網 - it200.com我們可以使用事件處理程序來捕捉事件并作出適當的響應，以創建更好的用戶體驗。愛掏網 - it200.com在編寫事件處理程序時，我們應該盡量采用 DOM 元素屬性的方式來注冊事件處理程序，同時注意使用事件對象來訪問有用的事件信息。愛掏網 - it200.com