基于类名单击的Javascript获取元素

首先，我本应该在JSFIDLE中创建这个示例，但它们是只读模式

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

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

按钮1
按钮2

---

请不要回答jQuery；这不是这里的选项。

事件处理程序中的第一个参数将是对事件的引用

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

---

它不是

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

vari，
L
按钮，
按钮
函数clickHandler（e）{
console.log（this）；//单击的按钮
}
buttons=document.getElementsByClassName（'mybutton'）；
对于（i=0，l=buttons.length；i

我纠正了我的拼写错误-谢谢你指出这一点。对我来说似乎不起作用；我猜是因为创建了一个数组？

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