high latency on event with jquery

Question

my webapp is very slow and i start to investigate to find the reason. i think i find the problem, but not the solution. i analyzed with the console and you can see the result on the screen. the problem is everytime i click, there is a latency of almost 1000ms due to the event on the click. first, i think that was because of too many event click on the body in my code, but as you can see it's only between 0.3 and 1% if the total cost), very tiny compare to the 97.71% of n.event.handler. so my question is where this latency come from?

in my code, there is a lot of :

 $('html').on('click', '.class', function(){ });

maybe too much?

Answer 1

If you think you have too many of these:

$('html').on('click', '.class', function(){ });

you could try and refactor them into one handler:

$('html').on('click', function (e) {

  if (e.target.classList.contains('class')) {
       // e.target is the clicked element
      // do something here
  }

  if ($(e.target).is('class2')) {
     // you can wrap e.target into a jQuery object
     // the same way you wrap this.
     // do something else here
  }

});

Also, according to an answer to this question, you should remove and add back those event handlers if you have lots of dynamically created targets.