JavaScript authoritative design-event bubbling, capturing, event handlers, event sources, event objects (briefly learn note 18)

1. Event bubbling and event capture

2. Event and event handle  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 CV2. Remove event handlers when they are not neededExample: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

  EventHandler (e) {e  = e | |     window.event;  //  prevent default behavior  if   (E.preventdefault) {e.preventdefault ();  // ie other than } else   {E.returnvalue  = false ; // //  Note: This place is not replaced with return false  // return FA LSE can only remove 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.

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);}

JavaScript authoritative design-event bubbling, capturing, event handlers, event sources, event objects (briefly learn note 18)