JQuery.click() vs onClick

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.

4 years ago

You could combine them, use jQuery to bind the function to the click

<div id="myDiv">Some Content</div>



$('#myDiv').click(divFunction);



function divFunction(){

 //some code

}

4 years ago

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);

4 years ago