イベント リスナーをクラスに追加するときに「classname.addEventListener(\'click\', myFunction(), false);」が機能しないのはなぜですか?

クラスのイベント リスナー: 実践ガイド

クリック時にクラス属性値をキャプチャする探求中に、JavaScript コードで問題が発生した可能性があります。具体的には、 classname.addEventListener('click', myFunction(), false); という行です。要素のイベント リスナーの登録に失敗します。

この問題に対処するには、コードを段階的に分析してみましょう:

1. getElementsByClassName: このメソッドは要素を正しく選択します指定されたクラス名で。ただし、配列ではなく、HTMLCollection と呼ばれる配列のようなオブジェクトを返します。
2. addEventListener: このメソッドは 3 つのパラメータを取ります: (a) イベント タイプ (この場合は「click」) )、(b) イベント リスナー関数、および (c) キャプチャ フェーズ (バブリング イベントの場合は通常 false)。コードでは、addEventListener メソッドが呼び出されるとすぐに myFunction() が実行され、関数呼び出しの結果がイベント リスナーとして渡されます。これは誤りです。
3. 関数: 匿名関数 myFunction は属性「data-myattribute」を取得し、それをアラート ボックスに表示します。コードのこの部分は正しいです。

修正されたコード:

問題に対処するには、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);
}

修正の説明:

1. 配列のようなオブジェクト: HTMLCollection を要素はより良く変化する使用法。
2. ループ: 各要素にリスナーをアタッチするには、ループを使用して要素の配列のようなオブジェクトを反復処理します。
3. EventListener:イベント リスナーを追加するための正しい構文が使用され、myFunction をlistener.

ES6 では、ループとイベント リスナーの追加をより簡潔に行うことができます。

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

IE6-8 などの古いブラウザの場合は、次の存在を確認することを検討してください。使用する前に getElementsByClassName を取得してください。

以上がイベント リスナーをクラスに追加するときに「classname.addEventListener(\'click\', myFunction(), false);」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。