Event delegation

Event delegation is also called event agent , stay jQuery It is called event delegation .

Event delegation is to place event listeners on the ancestor element （ Such as parent element 、 Grandfather element ） On .

Because the event will propagate up to the parent node in the bubbling phase , Therefore, we can define the listening function of the child node on the parent node , The listener function of the parent node uniformly handles the events of multiple child elements . This method is called event proxy .

The principle of event delegation

Instead of setting up an event listener for each child node , Instead, the event listener is set on its parent node , Then the event affects the setting of each child node with the principle of bubbling

Event delegation

The more binding events , The larger the browser memory footprint , Seriously affect performance

Only operate once DOM, Improve the performance of the program

Suppose there is a list , There are... In the list 100 List items , We need to respond to an event when we click on each list item . The previous practice was to use for Loop through adding click events to each list item , This consumes a lot of memory , Poor performance . So with event proxies , Improve program performance .

<ul>
  <li>dianwo1</li>
  <li>dianwo2</li>
  <li>dianwo3</li>
    ...
  <li>dianwo100</li>
</ul>

With the help of event proxy ： You don't need every li Add a click event to the item , Just give the parent container ul Binding method , No matter which one you click li term , According to the transmission mechanism of bubble propagation , Click event , Execute the corresponding processing method , According to the source of the event e.target, We can know who is clicking , To accomplish different things .

Event delegate implementation

<ul>
  <li>dianwo</li>
  <li>dianwo</li>
  <li>dianwo</li>
  <li>dianwo</li>
  <li>dianwo</li>
</ul>
​
let ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
  e.target.style.color='pink'
  //e.target  Get the object you clicked on 
})

target And currentTarget The difference between ：

• e.target: Elements of user action
• e.currentTarget: Elements that programmers listen to
• For example, in the above example ,e.target Namely li ,e.currentTarget Namely ul

In the above code , No event is bound to every element , Just for the parent node ul The binding event , But click on each li when , You can change its style .

The advantages of event delegation ：

1. Reduce event registration , Save memory .

• stay table On behalf of all td Of click event .
• stay ul On behalf of all li Of click event .

2. You can listen to dynamically generated elements .

• No need to add new li The binding click event .
• When deleting something li when , You don't have to remove it click event .