JavaScript - 获取点击按钮的属性

Question

这个答案解释了如何获取点击按钮的 ID。

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

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

Answer 1

工作小提琴。

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

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

注意：最好传递当前单击元素的对象，this然后获取所需的属性：

HTML :

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

JS：

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

希望这可以帮助。

Answer 2

你还能得到那个按钮的其他属性吗？

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

• 触发事件的 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>