Are event listeners identical to html events?

Question

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

Obviously they are identical in terms of usability, but I'm curious how the browser handles them.

Answer 1

No, this is not the same. OnClick sets the property of the DOM element, where .click() adds an eventListener.

The difference between the two is that each DOM element can only have a property property at once. Therefore, if you use onClick= twice for an element, there will be only the last added, the first will be overwritten.

This will always warn 2, because 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. Thus, the following warning 1 and 2:

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

The difference between jquerys .click() and .addEventListener() is that the jquery solution works in all browsers, so IE <= 8 has a different syntax ( attchEvent ). And you can unbind process all click handlers once. A normal JavaScript solution can only separate the passed function from all.

Answer 2

jQuery attaches events using JavaScript behind the scenes.

An important difference is that jQuery allows you to bind multiple events using click() , where since you can attach only one handler using onclick . This is because jQuery uses both addEventListener or attachEvent backstage, rather than being directly attached to .onclick .

In addition, binding handlers via JavaScript (using jQuery or not) contributes to unobtrusive JavaScript (i.e. does not mix JavaScript and HTML), which is a good thing.

Answer 3

(Noting that jQuery is a JavaScript library and therefore cannot do anything that you could not do in JavaScript yourself if you had time ...)

The jQuery .click() method differs from onclick several key ways. In a specific order:

• jQuery tries to normalize the event object so you don't have to worry about (mostly) minor differences between browsers.
• jQuery binds events to .addEventListener() or .attachEvent() depending on what your browser supports, so again, you don’t have to worry about the difference
• jQuery guarantees that if several handlers are attached to the same element and event, they will be executed in the order in which they were attached (noting that with .onclick you can only attach one handler in any case, but with .addEventListener() and .attachEvent() you can bind multiple handlers)
• if you use jQuery .on() or .delegate() (or deprecated .live() ) to attach events, and not quick access methods like .click() , it is easy to configure event delegation

Behind the scenes, all of the standard browser events are still happening, but jQuery provides a wrapper for them to do all of the above. Of course, there are other differences, but I think this is the most important.

Obviously, they are identical in terms of ease of use

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

Answer 4

.click() is not the same even in jQuery. This is a piece of code on top of onclick in html. JQuery allows you to bind methods to an event using this layer on top of regular html events.

You can modify / override .click() to tailor your needs. For example, when using a mobile browser or PDA, etc.