3. Event delegation : Leveraging event bubbling technology. The event of the child element eventually bubbles to the parent element until it is followed by the node. Event snooping parses events that bubble up from child elements.
Benefits of Event delegation: 1. Each function is an object, consumes memory, the more objects in memory, the worse the performance. 2. The number of DOM accesses caused by all event handlers must be specified beforehand, delaying the interaction readiness time of the entire page.
how to deal with poor performance caused by events: 1. Use event delegation technology to limit the number of connections to your CV 2. Remove event handlers when they are not needed Example: HTML:
<id= "mydiv"> <type= " Button " value=" point Me " id=" mybtn "></ Div >
JS:
var btn=document.getelementbyid ("mybtn"); Btn.onclick=function() { document.getElementById ("mydiv"). Innerhtml= "Progress ...";}
Note: The
button can be moved by setting the innerHTML, but the event handler remains in memory with the button holding the event handler reference. so it's best to manually remove:
var btn=document.getelementbyid ("mybtn"); Btn.onclick=function() { Btn.onclick =null; // removing event handlers document.getElementById ("Mydiv"). Innerhtml= "Progress ...";}
4. Event object and Event source
function EventHandler (e) { // e = e | | window.event; //var target = E.target | | e.srcelement; // }
5. Canceling the event default behavior
functionEventHandler (e) {e= e | |window.event; //Prevent default behavior if(E.preventdefault) {e.preventdefault ();//Outside IE}Else{E.returnvalue=false;//IE //Note: This place is not replaced with return false. //return false can only cancel elements } }
6. Block Event bubbling
function Myparagrapheventhandler (e) { = e | | window.event; if (e.stoppropagation) { e.stoppropagation (); // Else { true; // } }
7.event and Target Event : Represents all states that contain an event. target: The element that triggered the event. Currenttarget: The element of the event binding. pay attention to the difference between the two.
Html:
<ulID= "UlT"> <Liclass= "Item1">Fsda</Li> <Liclass= "Item2">Ewre</Li> <Liclass= "Item3">Qewe</Li> <Liclass= "Item4">Xvc</Li> <Liclass= "ITEM5">134</Li> </ul>
Js:
function (event) { console.log (event.target); Console.log (Event.currenttarget); }
Event source, event object (Brief study note 18)