Javascript获取被基于ClassName点击的元素

Question

首先，我将在JSFiddle中创建此示例，但它们处于只读模式。

我想获得基于类的单击的特定元素。

var button = document.getElementsByClassName("mybutton"); 
button.onclick = function() { 
    //how do I reference the specific button that was clicked? 
}; 

 

<button class="myclass">Button 1</button> 
<button class="myclass">Button 2</button> 

没有jQuery的回答，请;这不是一个选项。

Answer 1

它不document.getElementByClassName，这是document.getElementsByClassName参考。

看到区别了吗？

它很容易忽视：

document.getElementByClassName 
document.getElementsByClassName 
       ^

前者不存在的，除非你定义它，后者只在现代浏览器上运行。 getElementsByClassName将返回一个节点列表，您需要迭代该节点列表以将事件侦听器附加到每个节点。

var i, 
    l, 
    buttons, 
    button; 

function clickHandler(e) { 
    console.log(this);//the button that was clicked on 
} 
buttons = document.getElementsByClassName('mybutton'); 
for (i = 0, l = buttons.length; i < l; i++) { 
    button = buttons[i]; 
    button.onclick = clickHandler; 
} 

Answer 2

在事件处理的第一个参数将是事件

var button = document.getElementByClassName("mybutton"); 
button.onclick = function(e) { 
    //e.Target is a reference to your button 
};