Detailed examples of using JavaScript event delegation (proxy)
Introductionillustrate This article uses examples to introduce the usage of delegation (delegate) of events in JavaScript. Introduction to event delegation Event delegation, also called event proxy, is a common technique for binding events in JavaScript. It is to delegate the response events that originally need to be bound to the child elements to the parent elements or outer elements, so that the outer elements can take on the responsibility of event monitoring. The principle of event delegation is event bubbling of DOM elements. Advantages of event delegation 1. Save memory and reduce event binding Originally, events needed to be bound to all child elements, but after using event delegation, only one event binding is required. 2. Events can be dynamically bound, and newly added sub-object events can be processed by bound events Because the events generated by the newly added child objects will eventually bubble up to the parent element, so that they can be handled Example: Event delegationRequirement: A list whose contents pop up when a list element is clicked. Writing method 1: event delegationJust bind the event to the outer element. <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>I am the first li</li>
<li>I am the second li</li>
<li>I am the third li</li>
</ul>
<script>
let ul = document.getElementById('id-ul');
ul.addEventListener("click", function (ev) {
alert(ev.target.innerText);
})
</script>
</body>
</html>result
Writing method 2: Each child element is bound to an eventEach child element has events bound to it. <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>I am the first li</li>
<li>I am the second li</li>
<li>I am the third li</li>
</ul>
<script>
let li = document.querySelectorAll('#id-ul li');
for (let liElement of li) {
liElement.addEventListener("click", function (ev) {
alert(ev.target.innerText);
});
}
</script>
</body>
</html>result
Example: Adding a new elementRequirement: Every time you click the "Generate Button", a sub-list element is generated. Then, each time you click on a list element, its contents will pop up. Writing method 1: event delegation <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>1</li>
<li>2</li>
</ul>
<button id="btn">click</button>
<script>
let num = 3;
let eUl = document.querySelector("#id-ul");
let eButton = document.querySelector("#btn");
eButton.addEventListener("click", function () {
let newLi = document.createElement("li");
eUl.appendChild(newLi);
newLi.innerText = num++;
})
eUl.addEventListener("click",function (event) {
alert(event.target.innerText);
})
</script>
</body>
</html>result
As you can see, events of both existing elements and newly created elements will be processed. Writing method 2: Each child element is bound to an event <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<ul id="id-ul">
<li>1</li>
<li>2</li>
</ul>
<button id="btn">click</button>
<script>
let num = 3;
let eUl = document.querySelector("#id-ul");
let eButton = document.querySelector("#btn");
let eLi = document.querySelectorAll("#id-ul li");
eButton.addEventListener("click", function () {
let newLi = document.createElement("li");
eUl.appendChild(newLi);
newLi.innerText = num++;
})
for (let eLiElement of eLi) {
eLiElement.addEventListener("click",function (event) {
alert(event.target.innerText);
})
}
</script>
</body>
</html>result
You can see that the click events of the original elements will be processed, but the newly added ones will not be processed. This concludes this article on the detailed usage examples of JavaScript event delegation. 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:
|
<<: Image scrolling effect made with CSS3
>>: HTML+Sass implements HambergurMenu (hamburger menu)
Recommend
Solution to the problem of invalid line-height setting in CSS
About the invalid line-height setting in CSS Let&...
The difference between clientWidth, offsetWidth, scrollWidth in JavaScript
1. Concept They are all attributes of Element, in...
Detailed explanation of the difference between a href=# and a href=javascript:void(0)
a href="#"> After clicking the link, ...
Example code of vue + element ui to realize player function
The display without the effect picture is just em...
How to install MySQL and MariaDB in Docker
Relationship between MySQL and MariaDB MariaDB da...
How to use the realip module in Nginx basic learning
Preface There are two types of nginx modules, off...
Example code for implementing card waterfall layout with css3 column
This article introduces the sample code of CSS3 c...
Linux Check the installation location of the software simple method
1. Check the software installation path: There is...
Detailed explanation of HTML body tag and commonly used control tags in HTML
1. <body> tag: Used to mark the main body o...
The visual design path of the website should conform to user habits
Cooper talked about the user's visual path, w...
Solution for importing more data from MySQL into Hive
Original derivative command: bin/sqoop import -co...
Let's talk about the issue of passing parameters to React onClick
Background In a list like the one below, clicking...
Nginx load balancing configuration, automatic switching mode when downtime occurs
Strictly speaking, nginx does not have a health c...
JavaScript function syntax explained
Table of contents 1. Ordinary functions 2. Arrow ...