1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべき処理イベントを親要素に登録します。これにより、子要素がクリックされたときに、それ自身に対応するイベントがないことが判明した場合、親要素が検索され、応答されます。これを行う利点は次のとおりです。
2. イベント委任の原則イベント委任は、イベント バブリング原則を使用して実装されます。イベント バブリングとは何ですか?つまり、イベントは最も深いノードから始まり、段階的に上方に伝播します。 3. イベント委任の実施ケースを通じてイベント委任を実装します。 構造レイヤー + スタイル レイヤー コード: <スタイル> * { マージン: 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker ビルド PHP 環境チュートリアル詳細説明
>>: HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN
序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...
LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...
Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...
この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...
目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...
背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...
ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...
最近 CSS を勉強していたとき、 2 つの CSS プロパティだけを使用して全画面スクロール効果を...
序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...
目次クッキーの設定方法クッキーのデメリット: LocalStorage と SessionStora...
目次1. 応答原理の基盤2. コアオブジェクト: Dep と Watcher 3. 依存関係を収集し...
この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...
1. mysqldump バックアップ方法では論理バックアップが使用されます。最大の欠点は、バック...