JavaScript adds event listeners to event delegation in batches. Detailed process

1. What is event delegation?

Event delegation: Utilize the characteristics of event bubbling to register the processing events that should be registered on the child elements on the parent element. In this way, when the child element is clicked and it is found that there is no corresponding event of itself, the parent element will be searched for and responded to. The advantages of doing this are:

Reduce DOM operations and improve performance.
Sub-elements can be added at any time, and the added sub-elements will automatically have corresponding processing events.

2. The principle of event delegation

Event delegation is implemented using the event bubbling principle. What is event bubbling? That is, the event starts from the deepest node and then propagates upward step by step.
For example: there is a node tree on the page, div>ul>li>a; for example, if a click event is added to the innermost a, then this event will be executed outward layer by layer, and the execution order is 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, and a inside make a click event, they will bubble to the outermost div, so they will all be triggered. This is event delegation, entrusting their parents to execute events on their behalf.

3. Implementation of event delegation

Implement event delegation through a case.
Case: Add event listeners in batches. Use JavaScript to achieve: click on which li element, and the background of which li element turns red.

insert image description here

Structure layer + style layer code:

<style>
    * {
        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;
    }
</style>
<body>
	<ul id="list">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
	</ul>
</body>

3.1 Method 1: Looping to add events

Do not use event delegation, use a for loop to add click events, and the memory consumption is large.

var oList = document.getElementById('list');
var lis = oList.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        this.style.backgroundColor = 'red';
    }
}

3.2 Method 2: Using event delegation

Use event delegation.

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.

This concludes this article about the detailed process of adding event listeners to event delegation in batches using JavaScript. For more relevant JavaScript event delegation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

A brief analysis of event bubbling and event capture in js
Detailed Analysis of Event Bubbling Mechanism in JavaScript
Introduction to event bubbling and event capture in JS
Detailed explanation of JS bubbling events and event capture examples
Detailed explanation of js event delegation
Detailed explanation of javascript event bubbling, event capture and event delegation

<<: Docker build PHP environment tutorial detailed explanation

>>: HTML table markup tutorial (16): title horizontal alignment attribute ALIGN

JavaScript adds event listeners to event delegation in batches. Detailed process

1. What is event delegation?

2. The principle of event delegation

3. Implementation of event delegation

3.1 Method 1: Looping to add events

3.2 Method 2: Using event delegation

Markup Language - Image Replacement

Vue.js framework implements shopping cart function

Introduction to the differences between HTML name, id, class (format/application scenario/features), etc.

Docker swarm simple tutorial

Causes and solutions for MySQL too many connections error

The implementation of event binding this in React points to three methods

Problems and solutions when installing MySQL8.0.13 on Win10 system

Solution to the problem that MySQL service cannot be stopped or deleted under Windows

Will MySQL execute the update statement again if it has the same data as the original one?

A brief discussion on the lock range of MySQL next-key lock

Recommend

A brief discussion on the matching rules of host and user when Mysql connects to the database

React implements the expansion and collapse function of complex search forms

Nginx uses the Gzip algorithm to compress messages

The latest version of MySQL 8.0.22 download and installation super detailed tutorial (Windows 64 bit)

MySQL learning database operation DML detailed explanation for beginners

JS uses canvas technology to imitate echarts bar chart

mySQL server connection, disconnection and cmd operation

How to install php7 + nginx environment under centos6.6

How to get the contents of .txt file through FileReader in JS

After idea publishes web project, Tomcat server cannot find the project and its solution

Detailed explanation of MySQL sql_mode query and setting

Solution to MySQL 8.0 cannot start 3534

Tutorial on using Multitail command on Linux

Specific usage of Vue's new toy VueUse

Example analysis of the use of GROUP_CONCAT in MySQL