深入剖析HTML 點擊事件

一、點擊事件簡介

HTML 點擊事件是指在用戶單擊鼠標或敲擊鍵盤的某個鍵時，瀏覽器會執行相應的腳本代碼。該功能能夠幫助開發者實現各種交互操作，為用戶帶來更良好的使用體驗。

HTML 點擊事件主要通過JavaScript來實現。JavaScript 代碼可以控制頁面上的元素，例如修改元素的屬性或其所包含的內容。

HTML 點擊事件包括多種不同的類型，如鼠標點擊、鍵盤敲擊及觸摸屏幕。在這篇文章中，我們主要關注鼠標點擊事件。

二、常見事件類型

HTML 鼠標點擊事件包括多種不同的類型，每種類型對應不同的鼠標操作。下面列舉一些常見的事件類型：

click：單擊鼠標左鍵
dblclick：雙擊鼠標左鍵
mousedown：按下鼠標左鍵
mouseup：釋放鼠標左鍵
mouseenter：鼠標進入元素
mouseleave：鼠標離開元素

三、如何添加點擊事件

添加點擊事件主要涉及以下兩個步驟：

獲取需要添加事件的 HTML 元素
為該元素添加事件監聽器

<button id="myButton">點擊我</button>
<script>
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  alert('你點擊了我！');
});
</script>

上面的代碼創建了一個按鈕元素，並為其添加了一個點擊事件。當用戶單擊該按鈕時，瀏覽器會執行彈窗提示框，顯示 “你點擊了我！”。

四、事件冒泡與事件捕獲

在 HTML 點擊事件中，存在着事件冒泡和事件捕獲的概念。

事件冒泡指的是，當一個具有父子元素關係的元素被點擊時，該事件將從子元素一直冒泡到父元素，直到到達文檔的根元素（即 <html> 元素）。事件會依次觸發每一個遇到的父元素的事件監聽器。

事件捕獲正好相反，它從根元素開始，首先捕獲事件，然後逐層向下到達最終的目標元素。

默認情況下，HTML 事件觸發的順序是事件冒泡。但是，我們可以通過設置事件監聽器參數的 capture 選項來將事件變為事件捕獲。下面是一個示例：

<!DOCTYPE html>
<html>
<body>
  <div id="outer">
    <div id="inner">點擊我</div>
  </div>

  <script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');

  outer.addEventListener('click', function() {
    alert('父元素事件');
  }, true);

  inner.addEventListener('click', function() {
    alert('子元素事件');
  }, true);
  </script>
</body>
</html>

在上面的代碼中，我們為父元素和子元素都添加了事件監聽器，並設置了 capture 參數為 true。當用戶單擊子元素時，會首先觸發父元素的事件監聽器，然後才觸發子元素的事件監聽器。

五、事件委託

事件委託是指將事件處理器添加到父元素上，而不是將其分別添加到每個子元素上。這種方式通常用於大量類似的元素，例如表格、列表等。

當一個子元素觸發事件時，該事件會通過事件冒泡到其父元素。父元素中的事件監聽器可以檢查事件的目標元素，從而確定所觸發的子元素。

<ul id="myList">
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
const myList = document.getElementById('myList');
myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    alert(event.target.innerHTML);
  }
});
</script>

在上面的代碼中，我們為列表元素的父元素添加了一個點擊事件監聽器。當用戶單擊列表中的一個元素時，該事件會通過事件冒泡到列表元素，父元素的事件監聽器會檢查事件的目標元素，從而確定已單擊的列表項。

六、總結

HTML 點擊事件是豐富交互體驗的重要組成部分。我們可以通過添加事件監聽器來管理這些事件，實現各種具有響應性的 web 頁面和應用程序。

在處理 HTML 點擊事件時，我們可以考慮其中的關鍵概念：事件類型、事件捕獲和事件冒泡、以及事件委託等。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/204612.html