Javascript performance optimization tips: Event Delegation

Document directory

• Traditional listening methods:
• Use event Delegate:

Various DOM events provide the possibility of rich interactions. In today's Web applications, more and more Event Handlers become increasingly complex, and event listening that can be seen everywhere on pages has become commonplace, however, this leads to a performance problem. The more events are monitored, the worse the page running performance. There are two main reasons:1.Each time an event listener is added, an access to the monitored node is added when the page is loaded, which undoubtedly increases the time required for the page to be fully ready;2.Every event listening function occupies memory, while JavaScript does not have the right to allocate memory. If the limited memory is occupied by the event listening function, the page performance will decrease as well.

If there is an unordered list below, you need to add or remove a class named 'active' after each Li is clicked to mark this item as red or restore.

<ul id="list"><li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li><li>list 5</li></ul>

Traditional listening methods:

$('#list li').click(function(){$(this).toggleClass('active');});

In the above Code, the jquery selector finds every Li element in the unordered list and binds it to the click event. The code looks very simple, but in fact $ ('# list li') returns an array containing five above Li elements, then, an event handler function is bound to these five elements through iteration. This means that five more objects are added to the memory after the JavaScript code is executed.

Use event Delegate:

Event delegation is based on event bubbling. This process is roughly shown in:

The right part of the figure (bubbling phase) is the event Bubbling Process. When an event of an element is triggered, the event will be passed up (parent element) as if it were bubbling, until the document (Firefox, chrome, Safari bubbles to the window), the core of the event Delegate is to listen to a higher-level, less specific element in the Dom. When the event bubbles to this unspecified element, the target attribute of the event object is used to obtain the specific elements of the event. The following code uses the event Delegate Method to Improve the event processing function.

$('#nav').click(function(event){var target = event.target;$(target).toggleClass('active');});

Here, the listened element becomes ul, that is, the unspecified element just mentioned. Because of event bubbling, clicking on each Li will trigger ul event listening, and then point to the event Target (specific element) through the target in the event) to get the clicked Li, and finally switch the class 'active'. The task is completed.

By using the event Delegate technique, only one element event is listened to the same target, and only one event processing function is added. The browser needs to query and reference less dom for adding events. As the number of listening functions decreases, the memory usage also decreases. If you need to add many event elements to the page, the effect of event delegation on page performance improvement cannot be underestimated.