導入例示する この記事では、JavaScript でのイベントの委任 (delegate) の使用方法を例を使って紹介します。 イベント委任の概要 イベント委任 (イベント プロキシとも呼ばれる) は、JavaScript でイベントをバインドするための一般的な手法です。これは、本来は子要素にバインドする必要がある応答イベントを親要素または外部要素に委任し、外部要素がイベント監視の責任を引き受けられるようにすることです。 イベント委任の原則は、DOM 要素のイベント バブリングです。 イベント委任の利点 1. メモリを節約し、イベントバインディングを減らす 元々、イベントはすべての子要素にバインドする必要がありましたが、イベント委任を使用した後は、必要なイベント バインディングは 1 つだけになります。 2. イベントは動的にバインドでき、新しく追加されたサブオブジェクトイベントはバインドされたイベントによって処理できます。 新しく追加された子オブジェクトによって生成されたイベントは、最終的に親要素にバブルアップされ、処理できるようになるため、 例: イベントの委任要件: リスト要素をクリックするとコンテンツがポップアップ表示されるリスト。 記述方法1: イベント委譲イベントを外側の要素にバインドするだけです。 <!doctypehtml> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>これはタイトルです</title> </head> <本文> <ul id="id-ul"> <li>私は最初のliです</li> <li>私は2番目のliです</li> <li>私は3番目のliです</li> </ul> <スクリプト> ul = document.getElementById('id-ul'); とします。 ul.addEventListener("クリック", 関数(ev) { アラート(ev.target.innerText); }) </スクリプト> </本文> </html> 結果 記述方法2: 各子要素はイベントにバインドされます各子要素にはイベントがバインドされています。 <!doctypehtml> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>これはタイトルです</title> </head> <本文> <ul id="id-ul"> <li>私は最初のliです</li> <li>私は2番目のliです</li> <li>私は3番目のliです</li> </ul> <スクリプト> li = document.querySelectorAll('#id-ul li') とします。 for (let liElement of li) { liElement.addEventListener("クリック", 関数(ev) { アラート(ev.target.innerText); }); } </スクリプト> </本文> </html> 結果 例: 新しい要素を追加する要件: 「生成ボタン」をクリックするたびに、サブリスト要素が生成されます。その後、リスト要素をクリックするたびに、その内容がポップアップ表示されます。 記述方法1: イベント委譲<!doctypehtml> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>これはタイトルです</title> </head> <本文> <ul id="id-ul"> <li>1</li> <li>2</li> </ul> <button id="btn">クリック</button> <スクリプト> num = 3 とします。 eUl = document.querySelector("#id-ul"); eButton を document.querySelector("#btn") とします。 eButton.addEventListener("クリック", 関数() { newLi = document.createElement("li"); eUl.appendChild(newLi); 新しいLi.innerText = num++; }) eUl.addEventListener("クリック",関数(イベント) { アラート(event.target.innerText); }) </スクリプト> </本文> </html> 結果 ご覧のとおり、既存の要素と新しく作成された要素の両方のイベントが処理されます。 記述方法2: 各子要素はイベントにバインドされます<!doctypehtml> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>これはタイトルです</title> </head> <本文> <ul id="id-ul"> <li>1</li> <li>2</li> </ul> <button id="btn">クリック</button> <スクリプト> num = 3 とします。 eUl = document.querySelector("#id-ul"); eButton を document.querySelector("#btn") とします。 eLi = document.querySelectorAll("#id-ul li"); eButton.addEventListener("クリック", 関数() { newLi = document.createElement("li"); eUl.appendChild(newLi); 新しいLi.innerText = num++; }) (eLiのeLi要素とする) { eLiElement.addEventListener("クリック",関数(イベント) { アラート(event.target.innerText); }) } </スクリプト> </本文> </html> 結果 元の要素のクリック イベントは処理されますが、新しく追加された要素は処理されないことがわかります。 これで、JavaScript イベント委譲の詳細な使用例に関するこの記事は終了です。JavaScript イベント委譲に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...
この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...
同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...
reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...
MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...
序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...
目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...
まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...
導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...
今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...
GitHub が提供するコード ホスティング サービスと同様に、Docker Hub はイメージ ホ...
キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...
MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...
CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...