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

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

青灯夜游

リリース： 2021-02-01 17:50:41

転載

1833 人が閲覧しました

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: イベントを監視する要素の親要素を決定します

上記の例では、

< div id="buttons">

はボタンの親要素です。ステップ 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="item-4">总结</h2> <p>当发生点击事件（或传播的任何其他事件）时：</p> <ul> <li>事件从 <code>window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；

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

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

该机制称为事件传播。

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

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