Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to understand javascript event delegation". In daily operation, I believe many people have doubts about how to understand javascript event delegation. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand javascript event delegation"! Next, please follow the editor to study!

In javascript, event delegate, also known as event hosting or event proxy, binds the events of the target node to the ancestor node; it uses the event bubbling principle to manage all events of a certain type, and uses the parent element to represent a certain type of event of the child element.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

In JavaScript, event delegation (delegate), also known as event hosting or event broker, is a way to manage all events of a certain type by using the principle of event bubbling, and to use parent elements to represent a certain type of events of child elements.

The benefits of this: optimize the code, improve running performance, really separate HTML from JavaScript, and prevent the loss of registered events during the dynamic addition or removal of nodes.

Example 1

The following example binds the click event for each list item in the list structure using the general method, and clicking on the list item will prompt you for 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 wish.

Add list item 1 list item 2 list item 3 var ul = document.getElementById ("list"); var lis = ul.getElementsByTagName ("li"); for (var I = 0; I < lis.length; I + +) {lis.addEventListener ('cluick', function (e) {var e = e | | window.event; var target = e.target | | e.srcElement Alert (e.target [XSS _ clean]);}, false);} var I = 4; var btn = document.getElementById ("btn"); btn.addEventListener ("click", function () {var li = document.createElement ("li"); Li [XSS _ clean] = "Project list" + iTunes; ul.appendChild (li);})

Example 2

With the help of event delegation technique and event propagation mechanism, the following example binds the click event on the list box ul element, captures the click event when the event is propagated to the parent node ul, and then detects the current event response node type in the event handler. If it is a li element, further execute the following code, otherwise jump out of the event handler and end the response.

Add project list item 1 list item 2 list item 3 var ul = document.getElementById ("list"); ul.addEventListener ('click', function (e) {var e = e | | window.event; var target = e.target | | e.srcElement; if (e.target & & e.target.nodeName.toUpperCase () = = "LI") {alert (e.target [XSS _ element]) }, false); var I = 4; var btn = document.getElementById ("btn"); btn.addEventListener ("click", function () {var li = document.createElement ("li"); Li [XSS _ clean] = "Project list" + iTunes; ul.appendChild (li);})

Performance may be affected when there are a large number of elements on the page and one or more events are registered for each element. The program is slower when accessing and modifying older DOM nodes; especially when event connections occur in load (or DOMContentReady) events, which is a busy time for any rich interactive web page. In addition, the browser needs to save a record of each event handle, which also takes up more memory.

At this point, the study on "how to understand javascript event delegation" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.