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

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

このシナリオでは、ID を削除するためのリスト ビューがあり、ID を追加する必要があります。クラス「delete」を持つすべての要素に対する確認アラート。ただし、クラスの最初の要素のみがリスナーを受け取るという問題が発生しました。

解決策

これを解決するには、querySelectorAll を使用する必要があります。 querySelector の代わりに。 querySelectorAll は、指定されたクラスを持つすべての要素を含む NodeList を返します:

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

これで、NodeList を反復処理し、各要素にイベント リスナーを追加できます:

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

さらに、イベント リスナーを追加することのみが可能です。ユーザーが削除を確認しない場合のデフォルトのアクション。これにより、ユーザーが明示的に続行を選択した場合にのみ削除が実行されるようになります。

ES6 の機能強化

ES6 を使用すると、Array.prototype.forEach を使用してループを簡素化できます。 :

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

このバージョンはテンプレート文字列を利用します(ES2015 で導入) よりクリーンな構文です。

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