JavaScript-获取点击按钮的属性
[英]JavaScript - get attributes of clicked button
问题描述
This answer explains how you can get the ID of a clicked button. 
该答案说明了如何获取单击按钮的ID。
JavaScript - onClick to get the ID of the clicked button JavaScript-onClick获取被单击按钮的ID
However, can you also get other attributes of that button? 但是，您还能获得该按钮的其他属性吗？ Eg name or data-* attributes ? 例如name或data-* attributes ？
5 个解决方案
解决方案1
3 已采纳 2016-09-23 22:24:32
can you also get other attributes of that button?
In the click handler you have access to the event data which gives you access to: 在点击处理程序中，您可以访问事件数据，从而可以访问：
- the DOM node that triggered the event (
e.target)触发事件的DOM节点（ e.target） - the DOM node that the event was bound to (
e.currentTarget)事件绑定到的DOM节点（ e.currentTarget） - all other event data (such as which mouse button was used for click events, event type, etc…) 所有其他事件数据（例如，用于单击事件的鼠标按钮，事件类型等）
The DOM node references have APIs for accessing data such as their attributes DOM节点引用具有用于访问数据（例如其属性）的 API
Additionally the DOM node that the event was bound to is available by default as the calling context of the callback function. 此外 ，默认情况下，事件绑定到的DOM节点可用作回调函数的调用上下文。 That's a really fancy way of saying that the DOM node will be set to the this variable: 这是说DOM节点将设置为this变量的一种非常好的方法：
document.querySelector('button').addEventListener('click', function () { console.log(this); }, false);
<button type="button">example</button>
When you're using inline event handlers in HTML (which you should avoid), this is available to be passed to any functions you may want to call: 当你在使用HTML内嵌事件处理程序（你应该避免的）， this可被传递到你可能要调用任何函数：
function click(btn) { console.log(btn); }
<button type="button" onclick="window.click(this);">example</button>
解决方案2
2 2016-09-23 22:20:14
Working fiddle . 工作提琴 。
Yes you can, using getAttribute() , for example : 是的，您可以使用getAttribute() ，例如：
element.getAttribute('attribute-name'); //return 'attribute-name' attribute
NOTE: It's better to pass the object of current clicked element this then get the attribute you want : 注：这是更好地使电流通过单击元素的对象this则得到你想要的属性：
HTML : HTML：
<button name="X" data-other-attr='XX' onClick="reply_click(this)">Button</button>
JS : JS：
function reply_click(clicked_object)
{
alert(clicked_object.getAttribute('name'));
alert(clicked_object.getAttribute('data-other-attr'));
}
Hope this helps. 希望这可以帮助。
解决方案3
0 2016-09-23 22:20:58
Yes, you can. 是的你可以。
In the example you referenced: 在示例中，您引用了：
<button id="1" onClick="reply_click(this.id)">B1</button>
You could replace this.id with this.name or this.dataset and you would be passing those attributes to the reply_click function instead of the ID. 您可以使用this.name或this.dataset替换this.id ，然后将这些属性传递给reply_click函数而不是ID。
解决方案4
0 2016-09-23 22:26:31
You want to attach a click handler to the button ( button.addEventListener('click') ), and then access its properties using dot notation just like a regular JavaScript object. 您希望将单击处理程序附加到按钮（ button.addEventListener('click') ），然后像常规JavaScript对象一样使用点表示法访问其属性。
Fiddle: https://jsfiddle.net/9vkrwxmx/ 小提琴： https : //jsfiddle.net/9vkrwxmx/
解决方案5
0 2016-09-23 22:45:07
Below is slightly modified code of example you pointed out in the question. 下面是您在问题中指出的示例的稍微修改的代码。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.