JavaScript で同じクラスを持つ複数の要素にイベント リスナーを追加するにはどうすればよいですか?

同じクラスを持つ複数の要素にイベント リスナーを追加する

Web 開発では、多くの場合、同じクラス。これは、JavaScript の querySelectorAll() メソッドを使用して実現できます。

初期の問題:

提供されたコード スニペットは、「delete」を使用してすべての要素にイベント リスナーを追加しようとします。クラス。ただし、意図した動作ではリスナーをそのようなすべての要素に追加することであるにもかかわらず、リスナーはそのクラスの最初の要素にのみ追加されます。

解決策:

Toこの問題を解決するには、querySelector() の代わりに querySelectorAll() を使用して、「delete」クラスを持つすべての要素を選択する必要があります。 querySelector() は最初に一致した要素のみを返しますが、querySelectorAll() は一致するすべての要素を含む NodeList を返します。

修正されたコード:

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

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();
        }
    });
}

このコードを使用すると、イベント リスナーは正常に動作します。 「delete」クラスで各要素に追加します。

その他考慮事項:

• return false/true は、onclick = function() {...} でバインドされたイベント ハンドラーにのみ役立つことに注意してください。 addEventListening の場合、event.preventDefault() を使用する必要があります。
• 上記の ES5 コードは、ES6 の Array.prototype.forEach 反復を使用してよりクリーンかつ安全に作成できます。

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

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