ホームページ > ウェブフロントエンド > jsチュートリアル > イベント リスナーをクラスに追加するときに「classname.addEventListener(\'click\', myFunction(), false);」が機能しないのはなぜですか?

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

Patricia Arquette
リリース: 2024-12-07 03:17:10
オリジナル
518 人が閲覧しました

Why Doesn't `classname.addEventListener('click', myFunction(), false);` Work for Adding Event Listeners to Classes?

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

クリック時にクラス属性値をキャプチャする探求中に、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート