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