Detailed explanation of event delegation examples for javascript performance optimization

This article analyzes the event delegation of JavaScript performance optimization through examples. Share it with everyone for your reference, the details are as follows:

Bind a click event for each LI below

Go somewhereDo somethingSay hi

1. Traditional writing

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

In JavaScript, the number of event handlers added to the page will be directly related to the overall running performance of the page. The more events, the worse the performance.

There are many reasons:

1. Every function is an object and will occupy memory; the more objects in the memory, the worse the performance.
2. The number of DOM accesses caused by having to specify all event handlers in advance will delay the interactive readiness time of the entire page.

2. Event delegation

The solution to the problem of "too many event handlers" is event delegation.

Event delegation uses event bubbling to manage all events of a certain type by specifying only one event handler. For example: the click event will bubble up to the document level. That is, we can specify an onclick event handler for the entire page without having to add event handlers for each clickable element.

Event delegation method:

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

3. Advantages of using event delegation:

1) The document object is quickly accessible, and event handlers can be added to it at any point in the page life cycle (without waiting for DOMContentLoaded or load events). In other words, as soon as a clickable element is rendered on the page, it is immediately functional.

2) Less time is required to set up event handlers in the page. Adding just one event handler requires fewer DOM references and takes less time.

3) The entire page takes up less memory space, which can improve overall performance.

I hope this article will be helpful to everyone in JavaScript programming.

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial