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

Importance of background color declaration when writing styles

In MySQL database, datetime, bigint, and timestamp are used to represent time selection. Which one is the most efficient for storing time?

Blog

Detailed explanation of how to solve the problem of too long content in CSS

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

Importance of background color declaration when writing styles

Summary of the use of element's form elements

How to use jsonp in vue

In MySQL database, datetime, bigint, and timestamp are used to represent time selection. Which one is the most efficient for storing time?

Detailed explanation of how to solve the problem of too long content in CSS

Detailed tutorial on installing mysql on centos 6.9

Research on the Input Button Function of Type File

What we can learn from Google's new UI (pictures and text)

Sitemesh tutorial - page decoration technology principles and applications

How to prevent website content from being included in search engines

Recommend

Solution to the problem that the text is on the lower left and cannot be resized when the textarea is laid out

Detailed explanation of CSS margin collapsing

CSS to achieve the small sharp corner effect of bubbles

Solve the problem of MYSQL connection port being occupied and introducing file path errors

Detailed explanation of how to configure openGauss database in docker

Summary of knowledge points about covering index in MySQL

How to install Oracle on Windows Server 2016

Introduction to the use of alt and title attributes of HTML img tags

A simple way to build a Docker environment

How to use vue-video-player to achieve live broadcast

MySQL sequence AUTO_INCREMENT detailed explanation and example code

Use the docker build kit to build a Docker image that can be used on the Raspberry Pi

Detailed explanation of MySQL view management view example [add, delete, modify and query operations]

Detailed tutorial on installing SonarQube using Docker

Implementation of Nginx configuration and access to local static resources in Mac environment