JavaScript で同じクラスを持つ複数の要素にクリック イベント リスナーを適切にアタッチするにはどうすればよいですか?

クラスのクリック用の JavaScript イベント リスナー

クリック イベント リスナーをクラスにアタッチするには、addEventListener() メソッドを使用できます。このメソッドは 3 つの引数を取ります:

• イベント タイプ (例: 'click')
• リスナー関数
• オプションのキャプチャ フラグ (通常は false)

この例では、addEventListener() メソッドを正しく使用しています。ただし、次の 2 つの問題があります:

1.要素選択の間違い

document.getElementsByClassName("classname") を使用してクラス要素を選択しています。これは、HTMLCollection または NodeList (内容に応じて) を返します。ブラウザ)。これらは配列ではないため、配列括弧表記を使用してイベント リスナーを各クラス要素に直接接続することはできません。

2.イベント リスナー関数エラー

イベント リスナー関数で、クラス要素にアタッチするときに呼び出しています。これは、リスナーが追加されると関数がすぐに実行されることを意味します。代わりに、関数を呼び出さずに参照として渡す必要があります:

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

修正されたコード

修正されたコードは次のとおりです:

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

このコードは、各クラス要素にイベント リスナーを正しく追加し、要素がクリックされたときに提供された関数をトリガーし、要素のアラート内の data-myattribute 属性値。

以上がJavaScript で同じクラスを持つ複数の要素にクリック イベント リスナーを適切にアタッチするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。