JavaScript で特定のクラスを持つ要素にイベント リスナーを効率的に追加するにはどうすればよいですか?

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

JavaScript では、イベント リスナーはユーザー インタラクションをキャプチャする上で重要な役割を果たします。発生する可能性のあるタスクの 1 つは、特定のクラスの要素のクリックをリッスンすることです。

最適なパフォーマンスを確保するには、この目的で jQuery を使用することを避け、代わりに純粋な JavaScript に依存することをお勧めします。ただし、クラスのクリックに対してイベント リスナーを設定しようとすると、一般的に問題が発生します。コードが意図したアラートをトリガーしない可能性があります。

問題の原因

多くの場合、問題はgetElementsByClassName の誤った使用。このメソッドは配列のようなオブジェクトを返します。これは、配列に似ていますが、組み込みの配列メソッドがすべて欠けていることを意味します。 getElementsByClassName の結果にイベント リスナーを直接追加しようとすると、期待どおりに動作しません。

迅速な解決策

この問題を解決するには、配列のようなオブジェクトを反復処理して、個々の要素のイベント リスナー:

// Retrieve all elements with the "classname" class
var elements = document.getElementsByClassName("classname");

// Define the event handler function
var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

// Add event listeners to each element
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

または、ES6 サポートがある場合は、 forEach() メソッドを使用してコードを合理化します。

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

追加メモ

IE6、IE7、IE8 など、サポートが限定されているブラウザーは getElementsByClassName をサポートしていない可能性があることに注意することが重要です。このような場合、unknown が返されます。

さらに、イベント リスナーを使用する場合は、イベント ハンドラー関数のコンテキストを考慮することが重要です。提供されたコードでは、これはクリックされた要素を指します。

以上がJavaScript で特定のクラスを持つ要素にイベント リスナーを効率的に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。