What does javascript event delegation mean?

In JavaScript, event delegation is also called event hosting or event proxy, which is to bind the event of the target node to the ancestor node; it uses the event bubbling principle to manage all events of a certain type. Use the parent element to represent the handling of a certain type of event on the child element.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In JavaScript, event delegation (delegate) is also called event hosting or event proxy. It uses the event bubbling principle to manage all events of a certain type and uses parent elements to represent a certain type of child elements. How events are handled.

The benefits of doing this: optimize the code, improve running performance, truly separate HTML and JavaScript, and prevent the loss of registered events during the process of dynamically adding or deleting nodes.

Example 1

The following example uses the general method to bind a click event to each list item in the list structure. Click the list item, and a prompt dialog box will pop up. The text information contained in the current node. However, when we dynamically add list items to the list box, the newly added list items are not bound to the click event, which is contrary to our wishes.

<button id="btn">添加列表项目</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener(&#39;cluick&#39;, function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

Example 2

The following example uses event delegation techniques and event propagation mechanism to bind the click event on the ul element of the list box. When the event is propagated to the parent node When ul is on, capture the click event, and then detect the current event response node type in the event handling function. If it is a li element, further execute the following code, otherwise jump out of the event handling function and end the response.

<button id="btn">添加项目列表</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener(&#39;click&#39;, function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

When a page has a large number of elements and each element registers one or more events, performance may be affected. When accessing and modifying updated DOM nodes, the program will be slower; especially when the event connection process occurs in the load (or DOMContentReady) event, this is a busy time period for any rich interactive web page. . In addition, the browser needs to save a record of each event handler, which will also occupy more memory.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What does javascript event delegation mean?. For more information, please follow other related articles on the PHP Chinese website!