Javascript onclick event declaration

Question

I was just about to set onclick event for my element in javascript, but I wonder which of these two options is more efficient:

document.getElementById(myid).onclick = function(e){...}

or

document.body.onclick = function(e){if(e.target.id == myid)...}

Is there any difference? Is one of these declarations processed slower?

Efficient in what sense? The second takes more time to type, so its less efficient in that sense. — TJHeuvel
– TJHeuvel, Commented Sep 9, 2014 at 15:51
The first is faster....you are zeroing in on the ID of interest plus there is no conditional statement to detect the ID like in option #2 — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Sep 9, 2014 at 15:52
@SaintLouisFella it's good to keep efficiency in mind because in the long run you will create code where you (as jQuery says) "write less, do more" but just remember that TJHeuvel is correct and the gains you get from these microoptimizations will be very very small....for big speed gains, minimize queries, use descendant selectors, use css whenever possible, and more — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Sep 9, 2014 at 15:58

TJHeuvel · Accepted Answer · 2014-09-09 15:52:11Z

1

Its recommended that you use AddEventListener instead of binding to OnClick.

As for efficiency i'm not sure what you are worrying about. If its performance you should measure your issues and solve those instead of wondering about possibly minute details.

answered Sep 9, 2014 at 15:52

TJHeuvel

12.6k4 gold badges40 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omar Enrico Polo · Accepted Answer · 2014-09-09 16:04:35Z

1

If you use document.body.onclick = function(e){if(e.target.id == myid)...} you are listening to ALL the click of the mouse, include buttons, links, ecc ecc. This could slow down your site (expecially on mobile device or old computers).

Use document.getElementById(myid).onclick = function(e){...} isn't bad, but I suggest you to use document.getElementById('...').addEventListener("event", function(event) {...});

answered Sep 9, 2014 at 16:04

Omar Enrico Polo

3411 silver badge5 bronze badges

Collectives™ on Stack Overflow

Javascript onclick event declaration

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related