获取调用 onclick 函数的元素

Question

我有一个带有 onclick 属性的按钮，它指向函数 test() 。

 <button onclick="test()">Button 1</button>
<button onclick="test()">Button 2</button>
<button onclick="test()">Button 3</button>

功能测试（）：

 function test()
{
    var button_name = this.html;
    console.log("Im button "+ button_name);
}

如何获取有关单击按钮的信息？例如，我如何阅读 html？

jsfiddle ： https ://jsfiddle.net/c2sc9j9e/

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

Answer 1

将 this 引用传递给函数，然后读取 textContent 属性节点的文本内容。

HTML

 <button onclick="test(this)">Button 1</button>

脚本

function test(clickedElement){
   var button_name = clickedElement.textContent;
}

小提琴

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

Answer 2

我在 Vanilla JS 中遇到了另一种非常简单的方法，所以我把它贴在这里以供参考：

 function whoami () {
  var caller = event.target;
  alert("I'm " + caller.textContent);
}

 <button onclick="whoami()">Button 1</button>
<button onclick="whoami()">Button 2</button>
<button onclick="whoami()">Button 3</button>

我不确定浏览器是否支持它，但它至少适用于基于 Safari、Firefox 和 Blink 的浏览器。

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