获取点击按钮的属性

JavaScript - get attributes of clicked button

本文关键字：属性 按钮 获取      更新时间：2023-09-26

这个答案解释了如何获得被单击按钮的ID。

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

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

工作小提琴。

可以，使用 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'));
}

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

在click处理程序中，您可以访问事件数据，从而可以访问:

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

以下是您在问题中指出的示例代码的稍微修改。

<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>

可以。

在你引用的例子中:

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

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

您想要在按钮(button.addEventListener('click'))上附加一个单击处理程序，然后像使用常规JavaScript对象一样使用点表表法访问其属性。

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

相关文章：