search

Home >Web Front-end >JS Tutorial >An in-depth analysis of event delegation in JS

An in-depth analysis of event delegation in JS

青灯夜游
青灯夜游forward
2021-02-01 17:50:341828browse

An in-depth analysis of event delegation in JS

Why do we need to perform event delegation?

First implement a small function: after clicking the HTML button, output the message to the console.

In order to implement this small function, you need to select the button, and then use the addEventListener() method to attach an event listener: 

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

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

The above is to listen to a single element ( Especially the way events are done on buttons).

What if you need to listen to events on multiple buttons? Here's a possible implementation: 

<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>

You can see how it works on Codesandbox.

The button list is iterated as for (const button of buttons) and a new listener is attached to each button. In addition, after buttons are added or removed from the list, you must also manually remove or attach event listeners.

Is there a better way?

Fortunately, if we use the "event delegation" pattern, listening to events on multiple elements only requires one event listener.

Details of the event propagation mechanism used by event delegation. To understand how event delegation works, you should first understand what event propagation is.

Event propagation

When you click the button in the html below: 

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

How many elements will the click event fire? No doubt the button itself receives the click event. And all button ancestors, even document and window objects will also be received.

The propagation of click events is divided into three stages:

  • Capture stage —— From window, document Starting with the root element, the event propagates down to the ancestors of the target element

  • Target phase - The event is triggered on the element clicked by the user

  • Bubbling Phase - Finally, the event bubbles through the ancestors of the target element, all the way to the root elements document and window.

An in-depth analysis of event delegation in JS

An in-depth analysis of event delegation in JS

addEventListener The third parameter of the methodcaptureOrOptions :

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

enables you to capture events from different stages.

  • The listener will capture # if the captureOrOptions parameter is missing or is false or {capture:false} ##Events of target and bubble phases
    • If the parameter is
  • true or {capture: true}, then detect The listener will listen for capture phase events.
With the following code, you will listen for the capture phase click event that occurs on the

element: 
document.body.addEventListener(&#39;click&#39;, () => {
  console.log(&#39;Body click event in capture phase&#39;);
}, true);
In this# In the ##Codesandbox demo

, you can see how the event propagates in the console when you click the button. So how does event propagation help capture multiple button events?

The algorithm is simple: Attach an event listener to the button's parent and capture the bubbling event when the button is clicked. This is how event delegation works.

3. Event Delegate

Let’s use event delegation to capture clicks on multiple buttons: 

<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>

Open the

Codesandbox demo

and click Any button, you will see 'Click!' message is logged to the console. The idea of ​​event delegation is very simple. You don't need to attach the delegate event listener directly to the button. Instead, you can delegate the parent listener

. When the button is clicked, the parent element's listener will capture the bubbling event (remember the event propagation mentioned earlier?). Using event delegation requires 3 steps:

Step 1: Determine the parent element of the element to monitor the event

In the above example,

is the parent element of the button. Step 2: Attach the event listener to the parent element

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

Attach the event listener to the parent element The listener is attached to the button's parent element. This event listener will also react to button clicks because button click events bubble up through ancestor elements (due to event propagation).

步骤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（冒泡阶段）。

    • 该机制称为事件传播。

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

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

    • 确定要监视事件的元素的父级元素

    • 把将事件侦听器附加到父元素

    • 用 event.target 选择目标元素

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

    The above is the detailed content of An in-depth analysis of event delegation in JS. For more information, please follow other related articles on the PHP Chinese website!

    Statement：
    This article is reproduced at:51cto.com. If there is any infringement, please contact admin@php.cn delete
    Previous article：Solution to angularjs data binding failureNext article：Solution to angularjs data binding failure

    Related articles

    See more