JavaScript で同じクラスを持つ複数の要素のイベントを処理する方法

共通クラスを持つ要素のイベント処理

Web アプリケーションでは、同じクラスを持つ複数の要素にイベント リスナーを追加することが共通のタスクになる場合があります。これにより、削除の確認プロンプトなど、同様の要素間での標準化された動作が可能になります。

querySelector を使用した初期アプローチ

クラスを持つすべての要素にクリック イベント リスナーを追加することを目的とした次の JavaScript コードを考えてみましょう。 "delete":

var deleteLink = document.querySelector('.delete');

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

このコードは、「delete」クラスを使用して 1 つの要素のイベント リスナーを初期化しますが、このようなすべての要素のリスナーを登録できません。この制限は、最初に一致した要素のみを返す querySelector の使用から発生します。

querySelectorAll による解決策

複数の要素をリッスンするイベントを拡張するには、querySelectorAll を使用する必要があります。このメソッドは、指定されたクラスのすべての要素を含む NodeList オブジェクトを返します。次のコード スニペットは、これを示しています。

var deleteLinks = document.querySelectorAll('.delete');

イベント リスナーの反復と追加

NodeList を使用して、その要素を反復処理して、イベント リスナーを個別に追加できます。

for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

イベント防止処理

調整の 1 つは、確認が行われた場合にのみデフォルトの動作を防止することです。は誤りです。以前は、true を返すことが使用されていましたが、イベント リスナーのコンテキストでは、event.preventDefault() が適切なアプローチです。

デモと拡張オプション

このソリューションの動作デモは、次の場所にあります。 : http://jsfiddle.net/Rc7jL/3/.

さらに、ES6 バージョンが存在することにも注意してください。コードの読みやすさを向上させるための Array.prototype.forEach iteration とテンプレート文字列。

以上がJavaScript で同じクラスを持つ複数の要素のイベントを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。