Javascript Native Performance

Question

I know it is best to practice coding to avoid inline javascript, for example:

<img id="the_image" onclick="do_this(true);return false;"/> 

I am thinking of switching this kind of thing for jquery click related events, for example:

 $("#the_image").bind("click",function(){ do_this(true); return false; }); 

Will I lose any performance if I tie a ton of click events? I'm not worried about the time it takes to initially bind events, but the response time between the click and its state.

I bet if there is a difference, it is negligible, but I will have a ton of related functions. I am wondering if the browser handles the onclick attribute in the same way as the associated event.

thanks

Answer 1

Save yourself from anxiety, use the on event

 $("#the_image").on("click",function(){ do_this(true); return false; }); 

One event in which there is no performance with multiple elements.

Answer 2

In my work, it depended. I moved all my events to jquery. Then I profiled javascript using FireBug to find out what was the longest. Then I optimized those who take the longest.

If these are just a few, you will not notice any deterioration. If its hundreds or thousands, then you could.

Answer 3

The difference is negligible. If you need to bind to many elements of a page, performance failure may occur, and you may want to bind a higher-level object and just intercept the target element (image), where you attach a click to a div containing tag. Other than that, it should be good and will depend on your use case.

Look at the event bubbles in javascript for more details.