The impact of JavaScript events on memory and performance, and javascript events

The impact of JavaScript events on memory and performance, and javascript events

Although event handlers can add strong interaction capabilities for modern Web pages, adding a large number of Event Handlers without discrimination is definitely a silly behavior.

An event handler is essentially a function and an object stored in the memory. Setting a large number of Event Handlers will increase the number of objects in the memory, the performance of Web programs is getting worse and worse, and the user experience is poor.

In order to make better use of the event processing program, event delegation emerged to improve performance.

Event Delegate

Event delegation ):Bind the processing functions of the same events on several subnodes to their parent nodes, and uniformly process events from child nodes bubbling on the parent node. This technology is called event delegation.

Add:Event delegation is not limited to parent and child nodes. You can also play it like this. For example, many buttons in different locations in the page document are bound to click events. Using Event delegation, we can bind these events to the body element in a unified manner, and then process it (although this is rarely used ).

The following example shows the advantages of event delegation:

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

Suppose there is a requirement for the above Code: No matter which sub-List (li) of the above list (ul) is clicked, a box is displayed, to display the sublist we clicked.

Isn't it difficult? Now that you have the need, you should write the js Code. Now there are two ways to put it in front of you: 1. bind a click event to each li sub-element and set the processing function. 2. use event Delegate to bind a click event to the ul parent element, and then set the processing function

// Method 1 var list1 = document. getElementById ("list-1"); list1.addEventListener ("click", function () {alert (this. firstChild. nodeValue) ;}, false); var list2 = document. getElementById ("list-2"); list2.addEventListener ("click", function () {alert (this. firstChild. nodeValue) ;}, false); var list3 = document. getElementById ("list-3"); list3.addEventListener ("click", function () {alert (this. firstChild. nodeValue) ;}, false); var list4 = document. getElementById ("list-4"); list4.addEventListener ("click", function () {alert (this. firstChild. nodeValue) ;}, false); var list5 = document. getElementById ("list-5"); list5.addEventListener ("click", function () {alert (this. firstChild. nodeValue) ;}, false); // method 2 var parentList = document. getElementById ("parent-list"); parentList. addEventListener ("click", function () {var target = event.tar get; if (target. nodeName. toLowerCase () = "li") {alert (target. firstChild. nodeValue) ;}}, false );

Looking at the code above, here are some advantages of Method 2: 1. reduces the number of DOM accesses and improves performance. 2. bind the event handler of the child element to its parent element to reduce memory usage. better management of event handlers, such as removing references to an event handler

Note: If the requirements for each sub-element are different, we can rewrite method 2 as follows:

// Method 2 var parentList = document. getElementById ("parent-list"); parentList. addEventListener ("click", function () {var target = event.tar get; if (target. nodeName. toLowerCase () = "li") {switch (target. id) {case "list-1": alert ("The more you learn, the more you feel ignorant! "); Break; case" list-2 ": alert (" Love is an art! "); Break; case" list-3 ": target. innerHTML =" Haha, I changed it! "; Break; case" list-4 ": target. style. background = "# aaa"; break; case "list-5": target. style. color = "red"; target. style. fontSize = "2em"; break; default: break ;}}, false );

Because event delegation depends on the event bubbling mechanism, not all events can be delegated.

Events most suitable for event delegation include click, mousedown, mouseup, keydown, keyup, and keypress.

Event delegation is just a very good idea of event binding. Therefore, we should not stick to the above example to learn how to use it! Pai_^

Remove event handlers

As we have mentioned earlier, the event handler exists in the memory. Whenever an event handler is specified to an element, a connection is established between the browser code in the running process and the JavaScript code supporting page interaction. The more connections, the slower the page execution. The event delegate mentioned above is used to limit the number of established connections.

In addition, event handlers in the memory that are no longer used after use will also affect the memory and performance of Web applications if they are not released.

<Button id = "button"> submit </button> var button = document. getElementById ("button"); button. onclick = function () {// operation code button for submitting a form. onclick = null; // remove the event handler event.tar get. firstChild. nodeValue = "submitting... ";};

The general principle is to remove the obsolete event handlers and release the memory!

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!