ホームページ ウェブフロントエンド jsチュートリアル イベントバブリングとイベントデリゲーションの概念と機能

イベントバブリングとイベントデリゲーションの概念と機能

Feb 18, 2024 am 11:31 AM
js イベントバブリング クリックイベント イベントの代表団

イベントバブリングとイベントデリゲーションの概念と機能

JS イベント バブルとイベント委任とは何ですか? 具体的なコード例が必要です

イベント バブル (Event Bubble) とイベント デリゲーション (Event Delegation) は 2 種類の JS ですイベント処理に関連する重要な概念。この記事では、両方の概念を詳しく紹介し、具体的なコード例を示してその使用法と実装原理を説明します。

1. イベント バブリング

イベント バブリングとは、要素でイベント (クリック イベントなど) が発生したときに、その要素がイベント ハンドラーを定義している場合、イベントが次のように行われることを意味します。最初にトリガーされ、その後、イベントはドキュメントのルート要素に到達するまで、レベルごとに現在の要素から親要素に伝播します。

イベント バブリング メカニズムを使用すると、子要素ごとに個別のイベント ハンドラーを定義することなく、親要素の複数の子要素に同じイベント ハンドラーを簡単に追加できます。これによりコードが簡素化され、保守しやすくなります。

以下はイベント バブリングのコード例です:

HTML コード:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>
ログイン後にコピー

JS コード:

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});
ログイン後にコピー

上記のコードでは、When子要素 1 または子要素 2 をクリックすると、コンソールに次の出力が順番に表示されます。

触发子元素1的点击事件
触发父元素的点击事件
ログイン後にコピー

イベントが親要素にバブルした場合にのみ、親要素のイベント ハンドラーがトリガーされます。 event.stopPropagation() を呼び出して、イベントのバブリングを停止します。

2. イベント委任

イベント委任とは、イベント ハンドラーを親要素にバインドし、適切なアクションを実行するかどうかを決定することを指します。

イベント委任の利点は、新しい子要素が親要素に追加されるときに、イベント ハンドラーを新しい子要素に個別にバインドする必要がなく、イベントが親を通じて直接処理されることです。要素。 。これにより、イベント ハンドラーの数が大幅に削減され、パフォーマンスが向上します。

以下はイベント委任のコード例です:

HTML コード:

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>
ログイン後にコピー

JS コード:

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目:' + textContent);
  }
});
ログイン後にコピー

上記のコードでは、いずれかの li 要素をクリックすると、コンソールはクリックされた項目のテキスト コンテンツを出力します。その後に追加される li 要素の数に関係なく、それらのクリック イベントは親要素によって処理されます。

イベント委任の原則は、イベント バブリングを通じて実装されます。イベントは最初に親要素までバブルアップされ、次にイベントの元のターゲットに基づいて判断され、対応するアクションを実行する必要があるかどうかが決定されます。

概要:

イベント バブリングとイベント委任は、JS でのイベント処理に関連する重要な概念です。イベント バブリングを使用すると、同じイベント ハンドラーを親要素の複数の子要素に簡単に追加できるため、コードの再利用性が向上します。イベント委任は、イベントの元のターゲットに基づいて、イベント ハンドラーを親要素にバインドします。対応する操作により、パフォーマンスが向上し、コードの量が削減されます。実際の開発では、イベントバブリングとイベントデリゲーションを必要に応じて使い分けると、エレガントで効率的なコードを書くことができます。

以上がイベントバブリングとイベントデリゲーションの概念と機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

vueで画像にタッチイベントを追加する方法 vueで画像にタッチイベントを追加する方法 May 02, 2024 pm 10:21 PM

Vueで画像にクリックイベントを追加するにはどうすればよいですか? Vue インスタンスをインポートします。 Vue インスタンスを作成します。 HTML テンプレートに画像を追加します。 v-on:click ディレクティブを使用してクリック イベントを追加します。 Vue インスタンスで handleClick メソッドを定義します。

Golang を使用して強力なデスクトップ アプリケーションを開発する Golang を使用して強力なデスクトップ アプリケーションを開発する Mar 19, 2024 pm 05:45 PM

Golang を使用して強力なデスクトップ アプリケーションを開発する インターネットの継続的な発展に伴い、人々はさまざまな種類のデスクトップ アプリケーションから切り離すことができなくなりました。開発者にとって、強力なデスクトップ アプリケーションを開発するには効率的なプログラミング言語を使用することが重要です。この記事では、Golang (Go 言語) を使用して強力なデスクトップ アプリケーションを開発する方法を紹介し、いくつかの具体的なコード例を示します。 Golang は Google が開発したオープンソースのプログラミング言語で、シンプルさ、効率性、強力な同時実行性などの特徴があり、以下の用途に非常に適しています。

PHP のヒント: 前のページに戻る関数をすばやく実装する PHP のヒント: 前のページに戻る関数をすばやく実装する Mar 09, 2024 am 08:21 AM

PHP のヒント: 前のページに戻る機能をすばやく実装する Web 開発では、前のページに戻る機能を実装する必要があることがよくあります。このような操作により、ユーザー エクスペリエンスが向上し、Web ページ間の移動が容易になります。 PHP では、いくつかの簡単なコードを通じてこの機能を実現できます。この記事では、前のページに戻る機能を素早く実装する方法と、具体的な PHP コード例を紹介します。 PHP では、$_SERVER['HTTP_REFERER'] を使用して前のページの URL を取得できます。

Lauiuiログインページでジャンプを設定する方法 Lauiuiログインページでジャンプを設定する方法 Apr 04, 2024 am 03:12 AM

Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。

Honmeng HarmonyOS と Go 言語の開発 Honmeng HarmonyOS と Go 言語の開発 Apr 08, 2024 pm 04:48 PM

HarmonyOS と Go 言語開発の概要 HarmonyOS は Huawei が開発した分散オペレーティング システムであり、Go は最新のプログラミング言語であり、この 2 つの組み合わせにより、分散アプリケーション開発のための強力なソリューションが提供されます。この記事ではHarmonyOSでの開発におけるGo言語の使い方を紹介し、実践事例を通して理解を深めていきます。インストールとセットアップ Go 言語を使用して HarmonyOS アプリケーションを開発するには、まず GoSDK と HarmonyOSSDK をインストールする必要があります。具体的な手順は次のとおりです。 #GoSDK のインストールgogetgithub.com/golang/go#Set PATH

Webページ要素を取得するJavaScriptの詳細説明 Webページ要素を取得するJavaScriptの詳細説明 Apr 09, 2024 pm 12:45 PM

回答: JavaScript には、ID、タグ名、クラス名、CSS セレクターの使用など、Web ページ要素を取得するためのさまざまな方法が用意されています。詳細説明: getElementById(id): 一意の ID に基づいて要素を取得します。 getElementsByTagName(tag): 指定されたタグ名の要素グループを取得します。 getElementsByClassName(class): 指定されたクラス名の要素グループを取得します。 querySelector(selector): CSS セレクターを使用して、最初に一致した要素を取得します。 querySelectorAll(selector): CSS セレクターを使用して一致するものをすべて取得します

同時プログラミングにおける C++ 関数のイベント駆動メカニズムとは何ですか? 同時プログラミングにおける C++ 関数のイベント駆動メカニズムとは何ですか? Apr 26, 2024 pm 02:15 PM

並行プログラミングのイベント駆動メカニズムは、イベントの発生時にコールバック関数を実行することによって外部イベントに応答します。 C++ では、イベント駆動メカニズムは関数ポインターを使用して実装できます。関数ポインターは、イベントの発生時に実行されるコールバック関数を登録できます。ラムダ式ではイベント コールバックを実装することもでき、匿名関数オブジェクトの作成が可能になります。実際のケースでは、関数ポインタを使用して GUI ボタン​​のクリック イベントを実装し、イベントの発生時にコールバック関数を呼び出してメッセージを出力します。

See all articles