JavaScript Performance Optimization Event delegation

1 Memory and performance

In JavaScript, the number of event handlers added to a page is directly related to the overall performance of the page :

First, each function is an object, consumes memory , and the more objects in memory, the worse the performance.

Second, all event handlers must be specified beforehand, resulting in increased DOM access , which delays the interaction-ready time of the entire page.

2 Event delegates

The event delegate is the event target itself that does not handle the event , but instead delegates the processing task to its parent element or ancestor element . Event delegation takes advantage of event bubbling , specifying only one event handler to manage all events of a certain type.

An event delegate resolves an issue with "too many event handlers."

Suppose there is now a UL unordered list (id items), where Li (id item+ ordinal) represents each item, and the popup window displays the basic information of the item when the item is clicked.

<ul id= "Items" ><li id= "item1" > Unordered list 1</li><li id= "item2" > Unordered list 2</li><li id= "Item3" > Unordered list 3</li></ul>

The method of using event-bound Li (AddHandler is a cross-browser add event handler function, specifically implemented in the JavaScript Events section):

var item1 = document.getElementById (' item1 '); var item2 = document.getElementById (' item2 '); var item3 = document.getElementById (' item3 '); Eventutil.addhandler (item1, "click", Function () {alert ("I am item1!");}); Eventutil.addhandler (item2, "click", Function () {alert ("I am item2!");}); Eventutil.addhandler (Item3, "click", Function () {alert ("I am item3!");});

With event delegates, you simply add an event handler at the highest possible level of the DOM tree species.

var items = document.getElementById (' items '); Eventutil.addhandler (Items, "click", Function (event) {var event = eventutil.getevent (event); var target = Eventutil.gettarget (event); alert ("I am" + target.id);});

Here, the event delegate only adds an OnClick event handler for the UL element. Since all Li are sub-nodes of this UL, and their events are bubbling, the Click event will eventually be processed by this function.

Comparing the normal event binding code with the code after the event delegate, you will find that using the event delegate consumes less: Only one DOM node is acquired, and only one event handler is added, which takes up less memory.

All events that use buttons (most mouse events and keyboard events) are suitable for delegated techniques.

3 removing event handlers

There are usually two ways to reduce the connection between browser code and JavaScript code that supports page interaction:

1. Use Event Delegation technology to limit the number of connections established;

2. Remove the event handler when it is not needed.

If you do not remove the event handler well, it causes an "empty event handler", which in turn affects program memory and performance, causing the empty event handler to occur:

1. Remove the element with the event handler (RemoveChild (), ReplaceChild ()) from the document;

2. The element with the event handler has been innerHTML deleted. Workaround Remove the event handler by assigning a value of NULL to the event before the innerHTML operation .

3. When the page is unloaded (ie8-), if you do not clean up the event handlers before the page is uninstalled, they will be stuck in memory. Workaround remove all event handlers through the OnUnload event handler.

JavaScript Performance Optimization Event delegation