Talking about JavaScript events (event delegates)

An event handler provides system interaction for a Web program, but if there are too many event handlers on the page, it can affect the performance of the page. Each function is an object, which consumes memory, and the more objects in memory, the worse the performance. You need to specify an event handler for the DOM object beforehand, resulting in an increase in the number of accesses to the DOM, which delays the interaction-ready time of the entire page.

• Event delegate

The solution to an excessive number of event handlers is to use event delegates. Event delegation takes advantage of event bubbling, specifying only one event handler to manage all events of a certain type. For example, the Click event will always bubble to document, which means that we only need to specify an onclick event handler for the entire page, rather than having to add individual elements for each click event.

1 <ulID= "UL1">2             <LiID= "Li1">111</Li>3             <binID= "Li2">222</Li>4         </ul>

For example, the above code, if we use the usual means to add event handlers, we need to add an event for each li. But with bubbling, we just need to specify an event handler and be able to do the same.

1 var Oul = document.getElementById ("Ul1");2 eventutil.addevent (Oul, "click", Function (EV) {3 var ev = eventutil.getevent (EV); 4 var target = eventutil.gettarget (EV); 5 if (target.id = = ' Li1 ') {6 Console.log ("1"); 7                 }8 else if (target.id== "Li2") {9 Console.log ("2");Ten } One});

In the code above, event handlers are specified for UL1 through event bubbling, which is triggered by event bubbling when we click on Li, and the object is able to get the element objects currently clicked through target. A different if statement is executed for each element through the element ID.

Not all events are appropriate for the use of event delegates, and the more applicable events are: MouseUp, MouseDown, click, KeyUp, KeyDown, and KeyPress. Although MouseOver and Mouseout also support event bubbling, it can be cumbersome to use event delegates, and you need to calculate the position of the mouse and the position of the element (when the mouse moves from one element to its child node, or the move out element triggers the Mouseout event).

1 varOul = document.getElementById ("Ul1"); 2Eventutil.addevent (Oul, "mouseout",function(EV) {3                 varEV =eventutil.getevent (EV); 4                 vartarget =eventutil.gettarget (EV); 5                 if(Target.id = = ' Li1 ') {6Console.log ("1"); 7                 }8                 Else if(target.id== "Li2"){9Console.log ("2");Ten } One});

For example, the above code, when the mouse moved to the LI element will trigger Mouseout, the mouse moved out of the UL element will also trigger the Mouseout event.

• Removing event handlers

The previous article has already talked about the addition of events and the removal of events. There are too many event handlers on the page that can affect the performance of the page, and in addition to using event delegates, some events are removed. Some of the outdated, out-of-date event handlers that are left in memory are also the main issues that contribute to Web page and memory performance.

When we remove elements from a page, we can use the RemoveChild and ReplaceChild methods, but sometimes we also replace elements with innerHTML. If an element has an event handler that is replaced by innerHTML, the event handler is still present, and the event handler is not used, but it cannot be reclaimed and will always occupy memory space.

　　

 1  <  div  id  = "Firstdiv"  >  2  <  INP UT  type  = "button"   ID  =" Btnadd "  value  = "Add"  />  3  </ div  >  

1 eventutil.addevent (document.getElementById ("Btnadd"), "click",function(event) {2                  document.getElementById ("Firstdiv"). Innerhtml= "Processing"; 3             });

A click event is bound to the Btnadd element in the code above, and the element is removed by innerHTML when clicked, but the element's event handler is not removed and remains in memory.

　　

1 var callback =function(event) {2                 eventutil.removeevent ( document.getElementById ("Btnadd"), "click", callback); 3                 document.getElementById ("Firstdiv"). Innerhtml= "Processing"; 4             }5             eventutil.addevent (document.getElementById ("Btnadd"), "click", Callback);

The above code, we manually removed the element's event handlers before the element was removed. This ensures that the event handler is also removed in memory, and that removing the button from the DOM is very thorough.

Talking about JavaScript events (event delegates)