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.