JS におけるイベント委任の詳細な分析-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS におけるイベント委任の詳細な分析

青灯夜游

Feb 01, 2021 pm 05:50 PM

javascriptイベントの代表団

JS におけるイベント委任の詳細な分析

イベント委任を実行する必要があるのはなぜですか?

最初に小さな関数を実装します。HTML ボタンをクリックした後、メッセージをコンソールに出力します。

この小さな関数を実装するには、ボタンを選択し、addEventListener() メソッドを使用してイベントリスナーをアタッチする必要があります。

<button id="buttonId">Click me</button>

<script>
  document.getElementById(&#39;buttonId&#39;)
    .addEventListener(&#39;click&#39;, () => console.log(&#39;Clicked!&#39;));
</script>

上記単一の要素 (特にボタン上でイベントが実行される方法) をリッスンすることです。

複数のボタンのイベントをリッスンする必要がある場合はどうすればよいでしょうか?可能な実装は次のとおりです:

<div id="buttons">
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  const buttons = document.getElementsByClassName(&#39;buttonClass&#39;);
  for (const button of buttons) {
    button.addEventListener(&#39;click&#39;, () => console.log(&#39;Clicked!&#39;));
  }
</script>

Codesandbox でどのように動作するかを確認できます。

ボタンリストは for (ボタンの定数ボタン) として反復され、新しいリスナーが各ボタンにアタッチされます。さらに、ボタンをリストに追加またはリストから削除した後は、イベントリスナーも手動で削除またはアタッチする必要があります。

もっと良い方法はありますか?

幸いなことに、「イベント委任」パターンを使用すると、複数の要素のイベントをリッスンするのに必要なイベントリスナーは 1 つだけです。

イベント委任によって使用される イベント伝播 メカニズムの詳細。イベント委任がどのように機能するかを理解するには、まずイベント伝播とは何かを理解する必要があります。

イベントの伝播

以下の HTML のボタンをクリックすると:

<html>
  <body>
    <div id="buttons">
      <button class="buttonClass">Click me</button>
    </div>
  </body>
</html>

クリックイベントはいくつの要素で発生しますか?間違いなく、ボタン自体がクリックイベントを受け取ります。そして、すべてのボタンの祖先、document オブジェクトや window オブジェクトも受信されます。

クリックイベントの伝播は 3 つのステージに分かれています:

キャプチャステージ —— window から、document ルート要素から始まり、イベントはターゲット要素の祖先まで伝播します
ターゲットフェーズ - イベントは要素でトリガーされますユーザーによってクリックされました
バブリングフェーズ - 最後に、イベントはターゲット要素の先祖を介してルート要素に至るまでバブリングします document と ウィンドウ。

JS におけるイベント委任の詳細な分析

addEventListener メソッドの 3 番目のパラメータ captureOrOptions :

element.addEventListener(eventType, handler[, captureOrOptions]);

を使用すると、さまざまなステージからイベントをキャプチャできます。

リスナーは #captureOrOptions パラメータが欠落しているか、false または {capture:false} ##Events の場合にキャプチャします。ターゲットフェーズとバブルフェーズの
true または {capture: true} の場合、リスナーは キャプチャフェーズをリッスンします。 イベント。

次のコードでは、

要素で発生するキャプチャフェーズのクリックイベントをリッスンします。

document.body.addEventListener(&#39;click&#39;, () => {
  console.log(&#39;Body click event in capture phase&#39;);
}, true);

In this# In ##Codesandbox デモ

では、ボタンをクリックしたときにイベントがコンソール内でどのように伝播するかを確認できます。それでは、イベント伝播は複数のボタンイベントのキャプチャにどのように役立つのでしょうか?

アルゴリズムは単純です。イベントリスナーをボタンの親にアタッチし、ボタンがクリックされたときのバブリングイベントをキャプチャします。これがイベント委任の仕組みです。

3. イベントデリゲート

イベントデリゲートを使用して、複数のボタンのクリックをキャプチャしましょう:

<div id="buttons"> <!-- Step 1 -->
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  document.getElementById(&#39;buttons&#39;)
    .addEventListener(&#39;click&#39;, event => { // Step 2
      if (event.target.className === &#39;buttonClass&#39;) { // Step 3
        console.log(&#39;Click!&#39;);
      }
    });
</script>

Codesandbox デモ

を開いて、[Any] ボタンをクリックすると、 'Click!' メッセージがコンソールに記録されます。イベント委任の考え方は非常にシンプルです。デリゲートイベントリスナーをボタンに直接アタッチする必要はなく、代わりに親リスナー

をデリゲートできます。ボタンをクリックすると、親要素のリスナーが バブリングイベント をキャプチャします (前に述べたイベントの伝播を覚えていますか?)。イベント委任の使用には 3 つの手順が必要です:

ステップ 1: イベントを監視する要素の親要素を決定します

上記の例では、

はボタンの親要素です。ステップ 2: イベントリスナーを親要素にアタッチする

#document.getElementById('buttons') .addEventListener('click', handler)

イベントリスナーをアタッチする親要素にリスナーはボタンの親要素にアタッチされます。

ボタンクリックイベントは祖先要素 を介してバブルアップするため (イベントの伝播により)、このイベントリスナーはボタンのクリックにも反応します。

步骤3：用 event.target 选择目标元素

单击按钮时，将会用event 对象参数调用处理函数。属性 event.target 访问在其上调度了事件的元素，在例子中是一个按钮：

// ...
.addEventListener(&#39;click&#39;, event => {
    if (event.target.className === &#39;buttonClass&#39;) {      
        console.log(&#39;Click!&#39;);
    }
});

顺便说明一下，event.currentTarget 指向事件侦听器直接附加到的元素。在例子中，event.currentTarget 是 <div id="buttons">。<p>现在，你可以看到事件委托模式的好处：事件委托仅需要一个事件侦听器，而不必像本文最初那样将侦听器附加到每一个按钮上。</p> <h2 id="总结">总结</h2> <p>当发生点击事件（或传播的任何其他事件）时：</p> <ul> <li>事件从 <code>window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；

事件发生在目标（目标阶段）上；

最后，事件在目标祖先之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。

该机制称为事件传播。

事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。

使用事件委托需要三个步骤：

确定要监视事件的元素的父级元素
把将事件侦听器附加到父元素
用 event.target 选择目标元素

更多计算机编程相关知识，请访问：编程视频！！

以上がJS におけるイベント委任の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は51ctoで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

WebStorm Mac版

便利なJavaScript開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。