JavaScript イベント委任 (プロキシ) の使用例の詳細

JavaScript イベント委任 (プロキシ) の使用例の詳細

導入

例示する

この記事では、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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript イベント委任の原則
  • jsイベント委譲の詳細な説明
  • JavaScript イベント委任の原則と使用例の分析
  • js イベント委任とイベントプロキシケース共有
  • jsイベントプロキシ(デリゲート)の詳しい説明
  • JS イベントバインディング、イベント監視、イベント委任の詳細

<<:  CSS3で作成した画像スクロール効果

>>:  Dockerコンテナのエクスポートとインポートの例

推薦する

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

流星効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...

Docker環境でMySQLを実行し、Binlogを有効にしてマスタースレーブ同期を構成する方法

同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...

Reactのヒントはフックの依存関係の問題を解消する方法を教えます

reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...

Windows システムに mysql5.7.21 をインストールするための詳細なチュートリアル

MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...

Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル

序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...

HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明

まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...

MySQL における int の最大値の詳細な説明

導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

Docker Hubの動作原理と実装プロセスの分析

GitHub が提供するコード ホスティング サービスと同様に、Docker Hub はイメージ ホ...

jsはタイトルと説明のキーワードを検出し、見つかった場合は置換するか他のページにジャンプします。

キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...

MySQL 5.7.18 バージョンの無料インストール構成チュートリアル

MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...

CSS の記述基準と順序を共有する [すべての人に使用を推奨]

CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...