jQuery.click() vs onClick
I have a huge jQuery application, and I'm using the below two methods for click events.
First method
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
Second method
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
JavaScript function call
function divFunction(){
//Some code
}
I use either the first or second method in my application. Which one is better? Better for performance? And standard?
Using $('#myDiv').click(function(){ is better as it follows standard event registration model. (jQuery internally uses addEventListener and attachEvent ).
Basically registering an event in modern way is the unobtrusive way of handling events. Also to register more than one event listener for the target you can call addEventListener() for the same target.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
http://jsfiddle.net/aj55x/1/
Why use addEventListener? (From MDN)
addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:
More about Modern event registration -> http://www.quirksmode.org/js/events_advanced.html
Other methods such as setting the HTML attributes, example:
<button onclick="alert('Hello world!')">
Or DOM element properties, example:
myEl.onclick = function(event){alert('Hello world');};
are old and they can be over written easily.
HTML attribute should be avoided as It makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find.
The problem with the DOM element properties method is that only one event handler can be bound to an element per event.
More about Traditional event handling -> http://www.quirksmode.org/js/events_tradmod.html
MDN Reference: https://developer.mozilla.org/en-US/docs/DOM/event
For better performance, use the native JavaScript. For faster development, use jQuery. Check the comparison in performance at jQuery vs Native Element Performance.
I've done a test in Firefox 16.0 32-bit on Windows Server 2008 R2 / 7 64-bit
$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
For click events, check Native Browser events vs jquery trigger or jQuery vs Native Click Event Binding.
Testing in Chrome 22.0.1229.79 32-bit on Windows Server 2008 R2 / 7 64-bit
$('#jquery a').click(window.testClickListener); // 2,957 operations/second
[].forEach.call( document.querySelectorAll('#native a'), function(el) {
el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second
From what I understand, your question is not really about whether to use jQuery or not. It's rather: Is it better to bind events inline in HTML or through event listeners?
Inline binding is deprecated. Moreover this way you can only bind one function to a certain event.
Therefore I recommend using event listeners. This way, you'll be able to bind many functions to a single event and to unbind them later if needed. Consider this pure JavaScript code:
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
This works in most modern browsers.
However, if you already include jQuery in your project — just use jQuery: .on or .click function.