JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス

1. イベント委任とは何ですか?

イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべき処理イベントを親要素に登録します。これにより、子要素がクリックされたときに、それ自身に対応するイベントがないことが判明した場合、親要素が検索され、応答されます。これを行う利点は次のとおりです。

DOM 操作を減らし、パフォーマンスを向上させます。
サブ要素はいつでも追加でき、追加されたサブ要素には対応する処理イベントが自動的に設定されます。

2. イベント委任の原則

イベント委任は、イベントバブリング原則を使用して実装されます。イベントバブリングとは何ですか?つまり、イベントは最も深いノードから始まり、段階的に上方に伝播します。
例えば、ページ上にdiv>ul>li>aというノードツリーがあり、例えば一番内側のaにクリックイベントを追加すると、このイベントは外側に向かってレイヤーごとに実行され、実行順序はa>li>ul>divです。このような仕組みがあるので、一番外側のdivにクリックイベントを追加すると、内側のul、li、aがクリックイベントを作成すると、一番外側のdivにバブリングされ、すべてトリガーされます。これがイベント委任であり、親に代わってイベントを実行することを委託します。

3. イベント委任の実施

ケースを通じてイベント委任を実装します。
ケース: イベントリスナーをバッチで追加します。 JavaScript を使用して、どの li 要素をクリックすると、どの li 要素の背景が赤くなるかを実現します。

ここに画像の説明を挿入

構造レイヤー + スタイルレイヤーコード:

<スタイル>
    * {
        マージン: 0;
        パディング: 0;
    }
    ul {
        フロート: 左;
        幅: 800ピクセル;
        上マージン: 50px;
    }
    ul li {
        リストスタイル: なし;
        フロート: 左;
        幅: 200ピクセル;
        高さ: 200px;
        境界線: 1px実線 #000;
        右マージン: 20px;
    }
    ul li:最初の子 {
        左マージン: 20px;
    }
</スタイル>
<本文>
	<ul id="リスト">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
	</ul>
</本文>

3.1 方法1: ループしてイベントを追加する

イベント委任を使用せず、for ループを使用してクリックイベントを追加すると、メモリ消費量が多くなります。

var oList = document.getElementById('list');
var lis = oList.getElementsByTagName('li');
(var i = 0; i < lis.length; i++) の場合 {
    lis[i].onclick = 関数（）{
        this.style.backgroundColor = '赤';
    }
}

3.2 方法2: イベント委任の使用

イベント委任を使用します。

var oList = document.getElementById('list');
oList.onclick = 関数 (e) {
	e.target.style.backgroundColor = '赤';
}

この場合、e.target はユーザーが実際にクリックした要素を表します。

これで、JavaScript を使用してイベントリスナーをイベント委任に一括で追加する詳細なプロセスに関するこの記事は終了です。JavaScript イベント委任に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: