JS原生点击事件用法介绍

1. 概述

JavaScript（简称JS）是一种脚本语言，可以在网页上实现丰富的交互效果。其中，点击事件是JS中最常用的事件之一，可以用于响应用户的鼠标点击操作。本文将详细介绍JS原生点击事件的用法。

2. 点击事件的基本用法

在JS中，可以通过addEventListener方法来为元素绑定点击事件。以下是其基本语法：

element.addEventListener(event, function, useCapture);

element：要绑定点击事件的元素。
event：要触发的事件类型，这里是点击事件，可以使用click。
function：点击事件触发时要执行的函数。
useCapture：（可选的）一个布尔值，表示是否使用捕获阶段，一般设为false。

例如，我们可以给一个按钮添加点击事件，并在点击时弹出一个对话框。

const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

3. 点击事件的传递方式

当页面上有多个嵌套的元素时，点击事件会按照一定的传递方式进行触发。这是因为网页上的元素往往是分层结构的，点击一个元素时，事件会从其父级元素向下传递，再依次触发每个元素的点击事件。

点击事件的传递方式分为两种：冒泡和捕获。

冒泡：当一个元素上的点击事件被触发时，该事件会向上传递到父级元素，直到达到HTML文档顶级元素。这是默认的传递方式。
捕获：当一个元素上的点击事件被触发时，该事件会从顶级元素开始逐级向下传递，直到达到触发的元素。

可以使用addEventListener的第三个参数useCapture来设置事件传递方式。若将其设置为true，则为捕获方式；若设置为false或省略，则为冒泡方式。

以下示例代码演示点击事件的冒泡和捕获方式。

const outerDiv = document.querySelector("#outerDiv");
const innerDiv = document.querySelector("#innerDiv");

outerDiv.addEventListener("click", function() {
  console.log("外层div被点击了");
}, true);

innerDiv.addEventListener("click", function() {
  console.log("内层div被点击了");
}, true);

上述代码中，当我们点击内层div时，先会触发捕获阶段的点击事件，然后再触发冒泡阶段的点击事件。控制台会分别输出内层div被点击了和外层div被点击了。

4. 阻止事件冒泡

有时，我们希望在特定情况下阻止点击事件向父级元素传递，这时可以使用stopPropagation方法来停止事件冒泡。

以下示例代码演示如何阻止事件冒泡。

const outerDiv = document.querySelector("#outerDiv");
const innerDiv = document.querySelector("#innerDiv");

outerDiv.addEventListener("click", function() {
  console.log("外层div被点击了");
});

innerDiv.addEventListener("click", function(event) {
  console.log("内层div被点击了");
  event.stopPropagation();
});

上述代码中，当我们点击内层div时，只会触发内层div的点击事件，而不会触发外层div的点击事件。

5. 获取点击的目标元素

当点击事件被触发时，可以使用event.target来获取实际点击的目标元素。在事件处理函数中，this关键字也指向了触发事件的元素。

以下示例代码演示如何获取点击的目标元素。

const myDivs = document.querySelectorAll(".myDiv");

myDivs.forEach(function(div) {
  div.addEventListener("click", function(event) {
    console.log(`你点击了  ${event.target} 元素`); console.log(`this指向的是$ {this} 元素`);
  });
});

上述代码中，当我们点击包含.myDiv类的div元素时，控制台会打印出点击的具体元素和this指向的元素。