JavaScript クラスでクリック イベント リスナーを正しく実装するにはどうすればよいですか?

JavaScript のクラスにクリック イベント リスナーを実装する

JavaScript では、イベント リスナーはユーザー インタラクションを処理するための推奨される方法です。クリックされた要素から属性を取得しようとする場合、リスナーは従来のイベント ハンドラーを使用するよりも効率的なアプローチを提供します。

提供されたコード スニペット内:

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

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

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

問題は、addEventListener の方法にあります。が呼び出されます。イベント リスナー関数 myFunction は、その後に括弧を追加することによってすぐに実行されます (myFunction())。代わりに、関数参照自体を 2 番目の引数として渡す必要があります。

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

さらに、getElementsByClassName は HTML 要素ではなくノード リストを返します。イベント リスナーをノード リストの各要素に適用するには、次のように繰り返す必要があります。

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

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

ES6 をサポートするブラウザでは、forEach メソッドを使用してより簡潔な解決策を実現で​​きます。

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

これらの調整に対処することで、コードは、次のような外部ライブラリに頼ることなく、JavaScript イベント リスナーを使用してクリックされた要素の属性を正しくキャプチャできるようになります。 jQuery.

以上がJavaScript クラスでクリック イベント リスナーを正しく実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。