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/

Answer 1

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

HTML 的

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

脚本

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

Fiddle

Answer 2

四个选项：

将this传递给该功能。
```
<button onclick="test(this)">Button 1</button>
```
然后在函数中使用该参数。

使用addEventListener或jQuery＆＃39; on连接处理程序，然后在处理程序中使用this。

var buttons = document.querySelectorAll("selector-for-the-buttons");
Array.prototype.forEach.call(buttons, function(btn) {
    btn.addEventListener("click", handler, false);
});
function handler() {
    // Use `this` here
}

jQuery版本：

$("selector-for-the-buttons").on("click", function() {
    // Use `this` here
});

在这些按钮所在的容器上连接一个处理程序，并使用事件对象的target属性来确定单击了哪个（但请注意，如果使用{{1}中的其他元素你需要首先循环到button。
```
button
```
jQuery版本，为您处理document.querySelector("selector-for-the-container").addEventListener("click", function(e) { // Use `e.target` here }, false);中嵌套元素的可能性：
```
button
```

Answer 3

	function test(button)
	{
	    var button_name = button.getAttribute('name');
	    console.log("Im button "+ button_name);
	}

	<button onclick="test(this)" name="button1">Button 1</button>
	<button onclick="test(this)" name="button2">Button 2</button>
	<button onclick="test(this)" name="button3">Button 3</button>

Answer 4

如果你想使用Jquery，那么你可以在函数中调用$（this）对象。

Answer 5

你必须将“this”传递给函数

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

<script>
    function test(t)
    {
        console.log(t);
    }
</script>

Answer 6

以下是使用jquery的解决方案jsfiddle。

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

<script>
   function test(button)
   {
       var button_name = $(button).html();
       alert("Im button "+ button_name);
   }
</script>

Answer 7

只需为每个按钮添加id并将其传递给测试函数

这是 working jsfiddle

<button onclick="test(this.id)" id="button1">1</button>
<button onclick="test(this.id)" id="button2">2</button>
<button onclick="test(this.id)" id="button3">3</button>

<script>
    function test(id)
    {
        var button_name = id;
        alert("Im button name is : "+ button_name);
        console.log("Im button name is :"+ button_name);
    }
</script>

Answer 8

我在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的浏览器上工作。

获取调用onclick函数的元素

8 个答案: