Event delegate, also known as event delegate, generally delegates the events of one or a group of elements to its parent or outer element. In JavaScript Advanced Programming, event delegate is described as using event bubble, specifying only one event handler to manage all events of a certain type. Here’s an example of picking up a package:

Suppose there are fifty students in the class need to take delivery, if everyone need yourself to get, so is not only a waste of time, and will occupy the express points a lot of space, and if that fifty people express all specified monitor a person to lead, monitor according to the name on the delivery for distribution, so it can greatly improve the efficiency.

In the above example, the monitor acted on behalf of 50 students to pick up the express delivery event, so that the event of 50 students was entrusted to one person. DOM event delegation is designed according to this principle. It has two advantages, one is to save memory, and the other is to process dynamic elements.

1. Save memory

For example, if we take the express delivery, we can entrust the work of 50 people to the monitor alone, then we can greatly save the space of the express delivery point, and there is no need for 50 students to come to the express delivery point. If there are dozens of Li elements and each li element is set with a click event, then dozens of listeners need to be set. If according to the event bubble mechanism, the event listener is set in its parent element. During the listening process, according to E.target, the element that triggered the event is obtained, and then the operation is performed on this element. This can significantly reduce the memory footprint because only one listener needs to be set up, as shown below:

The < body > < ul > < li > I am li 1 < / li > < li > I am li 2 < / li > < li > I am li 3 < / li > < li > I am li 4 < / li > < li > 5 < / li > I am li... </ul> <script> let ul = document.querySelector('ul'); ul.addEventListener('click', e => { console.log(e.target.innerText); }) </script> </body>Copy the code

2. Handle dynamic elements

If one element is not fixed, but a dynamic change, you will need when elements are binding event, when there is no lift binding event, if you don’t remove wastes memory, so it will be very trouble, but if you use event delegation, the events are binding on the dynamic elements of the parent element, Instead of having to deal with the element’s existence, as in the following example, you can access a span element that does not yet exist:

<body> <div id="parent"></div> <script> let parent = document.getElementById('parent') setTimeout(() => { let span = document.createElement('span'); Sp.innertext = 'I am a child '; parent.appendChild(span); }, 1000); parent.addEventListener('click', e => { console.log(e.target) }) </script> </body>Copy the code

3. Limitations of event delegation

Event delegation also has certain limitations. For example, events such as Focus and blur do not have event bubbling mechanism, so event delegation cannot be adopted. For events such as Mousemove and Mouseout, although there are event bubbling events, they need to be continuously located by location calculation, which will consume performance. Therefore, event delegates are not appropriate.

4. Event delegate functions

Finally, attach a relatively complete event delegate function. When encapsulating this function, we should mainly consider this situation: Suppose you want to listen for click events on multiple Li elements, put the listener in its parent ul element, but if the LI element also has a span element nested within it, then when you click it will be easier to click on the span element instead of the Li element, If e.target is equal to ul, then there are no matching elements, and the loop ends:

function delegate(element, eventType, selector, fn) { element.addEventListener(eventType, e => { let el = e.target while (! el.matches(selector)) { if (el === element) { el = null break } el = el.parentNode } el && fn.call(el, e, el) }) return element }Copy the code

Please leave comments and discuss.

This paper reference: zhuanlan.zhihu.com/p/26536815