如何使用 JavaScript/jQuery 获取点击按钮的 ID？

在开发 Web 应用程序时，经常需要知道用户正在与页面上的哪个元素进行交互。如果我们要在JavaScript代码中处理这种情况，就需要一个方法来识别点击哪个按钮。在本文中，我们将介绍如何使用 JavaScript 和 jQuery 来获取点击的按钮的 ID。

基本方法

要获取按钮的 ID，可以使用 JavaScript 的事件处理程序来绑定一个事件侦听器(Listener)。当用户单击按钮时，侦听器将触发并提供一个事件对象。这个事件对象包含所有与该事件有关的信息，其中包括被点击的按钮的 ID。

下面是一个示例代码片段，该代码使用 JavaScript 来获取按钮的 ID。我们将在 HTML 页面中添加一个按钮，然后创建一个事件侦听器(Listener)，以侦听用户的单击事件，最后将获取按钮的 ID 并显示在控制台中。

// HTML 页面中添加按钮
<button id="myButton">点击我！</button>

// JavaScript 代码
// 获取按钮元素
const button = document.getElementById('myButton');
// 添加单击事件侦听器
button.addEventListener('click', function(e) {
  // 获取按钮 ID
  const buttonId = e.target.id;
  // 在控制台中显示按钮 ID
  console.log(buttonId);
});

输出结果为：

myButton

使用 jQuery

尽管使用 JavaScript 获取点击按钮的 ID 是一种有效的方法，但对于那些使用 jQuery 的开发者来说，jQuery 提供了一种更加简单和直观的方法来完成相同的操作。使用 jQuery 获取按钮的 ID 与使用 JavaScript 的方法非常相似，只需要使用 jQuery 的事件处理程序来替代 JavaScript 的事件处理程序即可。

下面是一个示例代码片段，该代码使用 jQuery 来获取按钮的 ID。我们将在 HTML 页面中添加一个按钮，然后创建一个事件侦听器(Listener)，以侦听用户的单击事件，最后将获取按钮的 ID 并显示在控制台中。

// HTML 页面中添加按钮
<button id="myButton">点击我！</button>

// jQuery 代码
// 在单击事件中获取按钮 ID
$('#myButton').click(function() {
  // 获取按钮 ID
  const buttonId = $(this).attr('id');
  // 在控制台中显示按钮 ID
  console.log(buttonId);
});

输出结果为：

myButton

总结

无论是使用 JavaScript 还是 jQuery，获取按钮的 ID 都是一项简单的操作。在大多数情况下，我们只需要在单击事件中添加一个事件侦听器(Listener)，然后获取被单击的按钮的 ID 即可。当我们需要在 Web 应用程序中识别用户与页面上的哪个元素进行交互时，这是一种非常有用的技术。