Detailed examples of using JavaScript event delegation (proxy)

Introduction
Example: Event delegation

Writing method 1: event delegation
Writing method 2: Each child element is bound to an event

Example: Adding a new element

Writing method 1: event delegation
Writing method 2: Each child element is bound to an event

Introduction

illustrate

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 delegation

Requirement: A list whose contents pop up when a list element is clicked.

Writing method 1: event delegation

Just 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 event

Each 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 element

Requirement: 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: