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

推薦する

Centos6.6 で php7 + nginx 環境をインストールする方法

この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...

この構成ファイルの排他ロックに失敗したという VMware 仮想マシンのプロンプトの解決方法

VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...

Vmwareでディスクを追加する方法:ディスクを拡張する

この記事では、ディスクを追加または拡張して、Vmare で有効にする方法について説明します。シナリオ...

Centos7.3 での mysql5.7 のインストールと設定のチュートリアル

この記事では、MySQL 5.7のインストールと設定のチュートリアルを参考までに紹介します。具体的な...

iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析

最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...

Webサービスのリモートデバッグとタイムアウト動作原理の分析

Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...

React-Native環境のセットアップと基本的な紹介

環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

JavaScript で最も高速なループはどれですか?

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...

ネイティブ JS でスネーク ゲームを書く

この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...

CentOS6.8 は cmake を使用して MySQL5.7.18 をインストールします。

オンライン情報を参考に、cmakeを使用してCentOS6.8サーバーにMySQL5.7.18をイン...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...