☰

クラスのJavaScriptクリックイベントリスナー 質問する

tag-icon • tag-icon javascript dom-events
クラスのJavaScriptクリックイベントリスナー 質問する

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

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

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

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

いずれかのクラスをクリックするたびに、属性を示す警告ボックスが表示されることを期待していましたが、残念ながらこれは機能しません。どなたか助けていただけませんか?

(注-これは簡単に実行できますjQueryが、使用したくないです)

ベストアンサー1

これは動作するはずです。getElementsByClassName条件に一致する要素の配列のようなオブジェクト (以下を参照) を返します。

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

jQuery はループ部分を自動的に実行しますが、これはプレーンな JavaScript で行う必要があります。

ES6 をサポートしている場合は、最後の行を次のように置き換えることができます。

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

注: 古いブラウザ (IE6、IE7、IE8 など) はサポートしていないgetElementsByClassNameため、 を返しますundefined。

詳細はgetElementsByClassName

getElementsByClassName配列を返すのではなく、HTMLCollectionほとんどの場合は を、NodeList一部のブラウザでは を返します（Mozilla 参照)。これらの型は両方とも配列に似ています (つまり、長さプロパティがあり、オブジェクトにはインデックスを介してアクセスできます) が、厳密には配列ではなく、配列から継承されたものではありません (つまり、配列で実行できる他のメソッドはこれらの型では実行できません)。

ユーザー@に感謝しますニモこのことを指摘し、私が完全に理解できるように掘り下げさせてくれたことに感謝します。

おすすめ記事