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

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

特定のクラスを持つすべての要素にクリック イベント リスナーを追加するには、 querySelector() の代わりに querySelectorAll() メソッドを使用できます。 querySelector() メソッドは最初に一致した要素を返し、querySelectorAll() は一致したすべての要素の NodeList を返します。

解決策:

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

これで、すべての削除リンクの NodeList。それらをループして、それぞれにイベント リスナーを追加できます。 one.

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

イベント リスナーでは、this キーワードを使用して現在の要素を参照できます。これにより、要素の title 属性にアクセスし、ユーザーに確認メッセージを表示できるようになります。

注: のデフォルトのアクションを防ぐために、event.preventDefault() を使用することが重要です。ユーザーが削除を確認した場合、リンクは行われません。

ES6バージョン:

ES6 を使用すると、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 サイトの他の関連記事を参照してください。