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
この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...
みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...
VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...
この記事では、ディスクを追加または拡張して、Vmare で有効にする方法について説明します。シナリオ...
この記事では、MySQL 5.7のインストールと設定のチュートリアルを参考までに紹介します。具体的な...
最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...
Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...
環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...
データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...
この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...
オンライン情報を参考に、cmakeを使用してCentOS6.8サーバーにMySQL5.7.18をイン...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...