[解決済み】JavaScriptのクリックイベントリスナーをクラスで使用する。

質問

現在、クリックされたクラスの属性を取得するためのJavaScriptを書こうとしています。正しい方法でこれを行うには、イベントリスナーを使用する必要があることは分かっています。 私のコードは次のとおりです。

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

classname.addEventListener('click', myFunction(), false);

クラスの1つをクリックするたびにアラートボックスが表示され、属性を教えてくれると思っていたのですが、残念ながらこれはうまくいきません。どなたか助けていただけませんか？

( 備考 - でかなり簡単にできますね。 jQuery が、私なら NOT 使いたい )

解決方法は？

これでうまくいくはずです。 getElementsByClassName は 配列 条件にマッチする要素の配列のようなオブジェクト(editを参照)。

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

プレーンなJavaScriptで行う必要があるループ部分を、jQueryが代行してくれます。

もし ES6対応 であれば、最後の行を置き換えることができます。

    Array.from(elements).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

注意: 古いブラウザ (IE6, IE7, IE8 など) では getElementsByClassName を返すので undefined .

訂正

getElementsByClassName は配列を返しませんが、ほとんどの場合は HTMLCollection を、いくつかのブラウザでは NodeList を返します ( モジラレフ ). これらの型はどちらも Array-Like ですが (length プロパティを持ち、オブジェクトにインデックスでアクセスできることを意味します)、厳密には Array ではありませんし、Array から継承したものでもありません (Array に対して実行できる他のメソッドがこれらの型に対して実行できないことを意味します)。

ユーザー@さんに感謝 ニモ このことを指摘し、完全に理解するために掘り下げてもらいました。