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 
       ^

、後者は唯一の近代的なブラウザで動作します。 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

あなたのイベントハンドラの最初の引数は、それがdocument.getElementsByClassNameだ、document.getElementByClassNameないイベント

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