深入剖析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>

在上面的代码中，我们为列表元素的父元素添加了一个点击事件监听器。当用户单击列表中的一个元素时，该事件会通过事件冒泡到列表元素，父元素的事件监听器会检查事件的目标元素，从而确定已单击的列表项。