Are event listeners identical to html events?

Question

Is onclick in HTML identical to .click() in jQuery?

Obviously they are identical from a usability standpoint, but I am curious how the browser handles them.

Answer 1

No it's not the same. OnClick sets a property of a DOM element, where .click() adds an eventListener.

The differnce between them is that every DOM element can only have on property of a type at once. So if you use onClick= twice on an element, only last added will win, the first will be overwritten.

This will always alert 2, cause the first attachment will be overwritten:

myDiv.onclick = function(){alert('1')} 
myDiv.onclick = function(){alert('2')}

Using .click() or .addEventListener('click', myFunction), you can add as many functions as you want. So the following will alert 1 and 2:

myDiv.click(function(){alert('1')}) 
myDiv.click(function(){alert('2')})

The differnt between jquerys .click() and .addEventListener() is, that the jquery solution works in all browser, cause IE<=8 has a different syntax (attchEvent). And that you can unbind all click handlers in once. The normal JavaScript solution can only detach the passed function not all of them.

Answer 2

jQuery attaches events using JavaScript behind the scenes.

An important difference is that jQuery allows multiple events to be bound using click(), where as you can only attach one handler using onclick. This is because jQuery uses either addEventListener or attachEvent behind the scenes, as opposed to binding to .onclick directly.

Furthermore, attaching handlers via JavaScript (using jQuery or not) promotes unobtrusive JavaScript (i.e. not mixing JavaScript and HTML), which is a good thing.

Answer 3

(Noting that jQuery is a JavaScript library and so can't do anything that you couldn't do in JavaScript yourself if you had the time...)

The jQuery .click() method is different to onclick in a few key ways. In no particular order:

• jQuery endeavours to normalise the event object so that you don't have to worry about the (mostly) minor differences between browsers
• jQuery binds events with .addEventListener() or .attachEvent() depending on what your browser supports, so, again, you don't have to worry about the difference
• jQuery guarantees that where multiple handlers have been bound for the same element and event they will be run in the order they were attached (noting that using .onclick you can only bind one handler anyway, but with .addEventListener() and .attachEvent() you can bind multiple handlers)
• if you use jQuery's .on() or .delegate() (or the deprecated .live()) to attach events, rather than shortcut methods like .click(), it is easy to setup event delegation

Behind the scenes all the standard browser events are still happening, but jQuery provides a wrapper for them to make all of the above happen. Of course there are some other differences, but I see the above as the most important.

Obviously they are identical from a usability standpoint

No they're not. It would be much more accurate to say that jQuery's events are (almost) the same as .addEventListener() or .attachEvent() in how you use them, but even then as detailed above jQuery gives you an extra level of abstraction to save you having to code it all yourself.

Answer 4

the .click() even in JQuery is not the same. It is a piece of codes on top of the onclick in html. JQuery allows to bind methods to a event using this layer on top of the normal html events.

You can change/override .click() to adapt your needs. For instance when using a mobile browser or pda etc.