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