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

How to install jupyter in docker on centos and open ports

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

How to install jupyter in docker on centos and open ports

Detailed tutorial on installing nvidia driver + CUDA + cuDNN in Ubuntu 16.04

Implementation of services in docker accessing host services

Introduction to Sublime Text 2, a web front-end tool

iframe multi-layer nesting, unlimited nesting, highly adaptive solution

Implementing countdown effect with javascript

Use of Linux network configuration tools

Some small methods commonly used in html pages

mysql code to implement sequence function

Beginner's guide to building a website ⑥: Detailed usage of FlashFXP

Recommend

Detailed explanation of new relational database features in MySQL 8.0

How to open a page in an iframe

Detailed examples of Docker-compose networks

MySql fuzzy query json keyword retrieval solution example

VMware configuration hadoop to achieve pseudo-distributed graphic tutorial

Native JS music player

MySQL 8.0.22 winx64 installation and configuration graphic tutorial

Learn the principles and common operations of MySQL partition tables through examples

Implementation of CSS fixed layout on both sides and adaptive layout in the middle

Tutorial on upgrading from Centos7 to Centos8 (with pictures and text)

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

js to achieve a simple magnifying glass effect

Analysis of GTK treeview principle and usage

Vue implements carousel animation

Difference between MySQL update set and and