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

Javascript获取基于ClassName单击的元素

2 个答案: