How to add event listeners to event delegates in batches by JavaScript

This article mainly introduces how JavaScript adds event monitoring in batches to the event delegation, which is very detailed and has a certain reference value. Friends who are interested must read it!

1. What is event delegation?

Event delegate: take advantage of the bubbling feature of events to register processing events that should have been registered on child elements on the parent element, so that when you click on the child element, you find that it does not have a corresponding event and look for it on the parent element. The advantages of doing so are:

Reduce DOM operations and improve performance.

You can add child elements at any time, and the added child elements will automatically have corresponding handling events.

two。 The principle of event delegation

Event delegation is realized by using the bubbling principle of events. What is event bubbling? It is that the event starts at the deepest node and then propagates the event upward gradually.

For example: there is a node tree on the page, div > ul > li > a For example, if you add a click click event to the innermost a, then this event will be executed layer by layer, in the order a > li > ul > div. There is such a mechanism, so if we add a click event to the outermost div, then when the ul,li,a does the click event, it will bubble to the outermost div, so it will be triggered. This is the event delegation, entrusting their parents to execute the event on their behalf.

3. Implementation of event delegation

An event delegate is implemented through a case.

Case: add event monitoring in batch. Implement using JavaScript: which li is clicked, and the background of which li element turns red.

Structure layer + style layer code:

* {margin: 0; padding: 0;} ul {float: left; width: 800px; margin-top: 50px;} ul li {list-style: none; float: left; width: 200px; height: 200px; border: 1px solid # 000; margin-right: 20px } ul li:first-child {margin-left: 20px;} 1 2 3 3.1 method 1: add events in a loop

Do not use event delegation, use for loop to add click events, which consumes a lot of memory.

Var oList = document.getElementById ('list'); var lis = oList.getElementsByTagName (' li'); for (var I = 0; I < lis.length; iDeputation +) {lis.onclick = function () {this.style.backgroundColor = 'red';}} 3.2.Method 2: use event delegation

Use event delegates.

Var oList = document.getElementById ('list'); oList.onclick = function (e) {e.target.style.backgroundColor =' red';}

In this case, e.target represents the element that the user actually clicked on.

The above is all the contents of the article "how to add event listeners to event delegates in batches by JavaScript". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!