Question

此答案说明了如何获取所点击按钮的ID。

JavaScript - onClick to get the ID of the clicked button

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

Answer 1

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

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

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

DOM节点引用具有用于访问their attributes

等数据的API

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

<强> Working fiddle

是的，您可以使用 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 3

是的，你可以。

在您引用的示例中：

<button id="1" onClick="reply_click(this.id)">B1</button>

您可以将this.id替换为this.name或this.dataset，然后将这些属性传递给reply_click函数而不是ID。

Answer 4

您希望将单击处理程序附加到按钮（button.addEventListener('click')），然后使用点表示法访问其属性，就像常规JavaScript对象一样。

小提琴：https://jsfiddle.net/9vkrwxmx/

Answer 5

下面是您在问题中指出的略有修改的示例代码。

<html>
<body>

<form>

<button id="1" name="test1" onClick="reply_click(1)">B1</button>
<button id="2" name="test2" onClick="reply_click(2)">B2</button>
<button id="3" name="test3" onClick="reply_click(3)">B3</button>

<script>
    function reply_click(clicked_id)
    {
        //alert(clicked_id);
        var temp = document.getElementById(clicked_id).getAttribute("name");
        alert(temp);
    }
</script>

</form>

</body>
</html>

JavaScript - 获取点击按钮的属性

5 个答案: