Home > Developer > JavaScript
Before we said we used a for loop to bind the event not seen the point here today we introduce a more convenient method, that is, event delegation, also known as event agent;
What is the commission of the matter?Event delegate: Simply to give an event to someone else to complete, is to use the bubbling principle, the event is bound to the node's parent node, triggering the execution effect.
the benefits of entrusting the matterTo use the event object, the event object has a target property and can return the element that triggered the event. Then get the node name through NodeName, and then convert the toLowerCase () to lowercase (can be omitted)
<body> <ul id="ul"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> </ul> <script type="Text/javascript">varOul = document.getElementById ("ul"); Oul.onclick=function (EV) {//get events, compatible with IE varEV = EV | | Window.Event; //become the source of the event (that is, the element of the current operation) standard browser with Ev.target;ie browser with Event.srcelement vartarget = Ev.target | |ev.srcelement; //toLowerCase () converts the value returned by nodename to lowercase, and if not written, requires = = "Li" if(target.nodeName.toLowerCase () = ='Li') {alert ("ABC"); } }; </script></body>
In this way, compared to the For loop, if there is a large number of Li, the JavaScript performance is greatly improved because only one DOM operation is performed at a time, and the LI element does not need to be traversed.
In addition to improving JavaScript performance, you can also dynamically bind events, and you can also enjoy this right for added elements, for example, a chestnut:
<body> <ul id="ul"> <input type="Button"Name=""Id="btn"Value="Add Li"/> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> </ul> <script type="Text/javascript">varOul = document.getElementById ("ul"); varOBTN = document.getElementById ("btn");
Add mouse move effect Oul.onmouseover=function (EV) {varEV = EV | | Window.Event; vartarget = Ev.target | |ev.srcelement; if(target.nodeName.toLowerCase () = ='Li') {Target.style.background="#f00"; } };
Add a mouse move out effect oul.onmouseout=function (EV) {varEV = EV | | Window.Event; vartarget = Ev.target | |ev.srcelement; if(target.nodeName.toLowerCase () = ='Li') {Target.style.background="#fff"; } };
Add a new Li Obtn.onclick=function () {varOLi = Document.createelement ('Li'); Oli.innerhtml=6666; Oul.appendchild (OLi); }; </script></body>
No matter how many Li you add, you will automatically bind the mouse to move out of the event, do not traverse Li, this is the benefits of event delegation
Event delegates in JavaScript (event proxies)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
