如何在事件中获取点击 ID - JavaScript

在 JavaScript 中，我们经常需要在事件处理程序中获取点击的元素 ID。本文将介绍如何在事件中获取点击 ID。

1. 使用 event.target.id

我们可以在事件处理程序中使用 event.target.id 来获取点击元素的 ID。下面是一个例子：

document.getElementById('my-button').addEventListener('click', function(event) {
  // 获取点击按钮的 ID
  var buttonId = event.target.id;
  console.log(buttonId);
});

在上面的例子中，event.target.id 返回的是点击按钮的 ID，我们可以将其保存到一个变量中供后续使用。

2. 在 HTML 中添加 data-* 属性

HTML 中的 data-* 属性可以用来存储自定义数据，我们可以在元素中添加一个 data-id 属性来存储元素的 ID。然后在事件处理程序中获取该属性的值。

下面是一个例子：

<button id="my-button" data-id="button-1">Click me</button>

<script>
document.getElementById('my-button').addEventListener('click', function(event) {
  // 获取点击按钮的 ID
  var buttonId = event.target.dataset.id;
  console.log(buttonId);
});
</script>

在上面的例子中，我们在按钮中添加了一个 data-id="button-1" 属性，用来存储该按钮的 ID。在事件处理程序中，我们可以使用 event.target.dataset.id 来获取该属性的值。

3. 使用 this.id

在事件处理程序中，this 关键字指向当前执行事件的元素。我们可以使用 this.id 来获取该元素的 ID。

下面是一个例子：

<button id="my-button">Click me</button>

<script>
document.getElementById('my-button').addEventListener('click', function(event) {
  // 获取点击按钮的 ID
  var buttonId = this.id;
  console.log(buttonId);
});
</script>

在上面的例子中，我们使用了 this.id 来获取点击按钮的 ID。this 关键字指向当前执行事件的元素，因此 this.id 返回的是按钮的 ID。

以上三种方法都可以用来获取点击元素的 ID，具体使用哪种方法取决于你的代码结构和个人习惯。

注意： 如果点击的元素没有 ID，那么 event.target.id 和 this.id 将返回空字符串。在这种情况下，我们需要使用其他方式来识别点击的元素。