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

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

特定のクラスを持つすべての要素にクリック イベント リスナーを追加するには、次の手順を実行します。 querySelector() の代わりに querySelectorAll() を使用してください一致する要素をすべて取得します。

JavaScript コード:

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

このコード内:

• var deleteLinks = document .querySelectorAll('.delete'); はクラスを持つすべての要素を取得します"delete".
• 次の for ループは、要素のリストを反復処理します。
• 各要素に対して、クリックをリッスンするイベント リスナーが追加されます。 event.
• If the confirm("削除してもよろしいですか " this.title) 関数は false を返します。event.preventDefault() 呼び出しは、クリック イベントのデフォルトの動作 (フォームの送信など) を防止します。

追加注:

• querySelector() のみが単一の要素を返し、querySelectorAll() は NodeList を返すことに注意してください。
• 使用中event.preventDefault() は、addEventListener().

を使用するときにフォームの送信やその他のデフォルトのアクションを防止するのに適しています。

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