JavaScript - 获取点击按钮的属性

Question

This answer 解释了如何获取单击按钮的 ID。

JavaScript - onClick 获取被点击按钮的ID

但是，您还可以获取该按钮的其他属性吗？例如 name 或 data-* attributes ？

原文由 Snowcrash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您还可以获得该按钮的其他属性吗？

在点击处理程序中，您可以访问事件数据，从而可以访问：

• 触发事件的 DOM 节点 ( e.target )
• 事件绑定到的 DOM 节点 ( e.currentTarget )
• 所有其他事件数据（例如哪个鼠标按钮用于单击事件、事件类型等……）

DOM 节点引用具有用于访问数据（例如 它们的属性）的 API

_此外_，事件绑定到的 DOM 节点默认情况下可用作回调函数的调用上下文。这是一种非常奇特的说法，DOM 节点将被设置为 this 变量：

 document.querySelector('button').addEventListener('click', function () {
  console.log(this);
}, false);

 <button type="button">example</button>

当您在 HTML 中使用内联事件处理程序时（您应该避免）， this 可以传递给您可能想要调用的任何函数：

 function click(btn) {
  console.log(btn);
}

 <button type="button" onclick="window.click(this);">example</button>

原文由 zzzzBov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

工作小提琴。

是的，您可以使用 getAttribute() ，例如：

 element.getAttribute('attribute-name'); //return 'attribute-name' attribute

注意： 最好传递当前点击元素的对象 this 然后获取你想要的属性：

HTML :

 <button name="X" data-other-attr='XX' onClick="reply_click(this)">Button</button>

记者：

 function reply_click(clicked_object)
{
     alert(clicked_object.getAttribute('name'));
     alert(clicked_object.getAttribute('data-other-attr'));
}

希望这可以帮助。

原文由 Zakaria Acharki 发布，翻译遵循 CC BY-SA 4.0 许可协议