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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js におけるイベントバブリングとイベントキャプチャの簡単な分析
  • JavaScript におけるイベント バブリング メカニズムの詳細な分析
  • JS でのイベント バブリングとイベント キャプチャの概要
  • JSバブリングイベントとイベントキャプチャ例の詳細な説明
  • jsイベント委譲の詳細な説明
  • JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

<<:  Docker ビルド PHP 環境チュートリアル詳細説明

>>:  HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN

推薦する

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...

Linux 上での MySQL データベースのリモート展開の詳細な手順

LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...

CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明

目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...

ボタントリガーイベントを使用して背景色の点滅効果を実現します

背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します

導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...

CSS を使用して fullpage.js のフルスクリーン スクロール効果を実装するサンプル コード

最近 CSS を勉強していたとき、 2 つの CSS プロパティだけを使用して全画面スクロール効果を...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

Vue はユーザーのログイン状態を維持します (さまざまなトークン保存方法)

目次クッキーの設定方法クッキーのデメリット: LocalStorage と SessionStora...

VUE 応答性原理の詳細な説明

目次1. 応答原理の基盤2. コアオブジェクト: Dep と Watcher 3. 依存関係を収集し...

jQuery で呼吸カルーセル効果を実現

この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...

データベースを削除して逃げる?xtraback を使用して MySQL データベースをバックアップする方法

1. mysqldump バックアップ方法では論理バックアップが使用されます。最大の欠点は、バック...