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

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

Recommend

MySQL table auto-increment id overflow fault review solution

Problem: The overflow of the auto-increment ID in...

HTML uses regular expressions to test table examples

Here is an example code for using regular express...

An IE crash bug

Copy code The code is as follows: <style type=...

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

ps: The environment is as the title Install possi...

Common HTML tag writing errors

We better start paying attention, because HTML Po...

How to solve the problem of too many open files in Linux

The cause is that the process opens a number of f...

WeChat applet picker multi-column selector (mode = multiSelector)

Table of contents 1. Effect diagram (multiple col...

Solution to Apache cross-domain resource access error

In many cases, large and medium-sized websites wi...

Analysis of MySql index usage strategy

MySql Index Index advantages 1. You can ensure th...

VUE+Canvas realizes the whole process of a simple Gobang game

Preface In terms of layout, Gobang is much simple...

WeChat applet development practical skills: data transmission and storage

Combining the various problems I encountered in m...

mysql implements adding time automatically adding and updating time automatically updating operation

Time fields are often used in database usage. Com...

Mysql optimization tool (recommended)

Preface While browsing GitHub today, I found this...

Definition and usage of MySQL cursor

Creating a Cursor First, create a data table in M...

How to completely uninstall iis7 web and ftp services in win7

After I set up the PHP development environment on...