The .on() event method

Published on: February 18, 2018

Welcome to tutorial number 4 of the Easy jQuery series part of! In the last tutorial, we looked at some basic event handler methods in jQuery. Today, we're going to focus on just one event method but show you  how you can listen for every event using just this one method. This is the on() event method. We're going to pretty much recreate everything in the last tutorial with the on event method. It's easy and powerful and it's newer than the event methods that we looked at last time. 

The .on() event method is easy to understand if you understand how Event Listeners in JavaScript works. We covered event listeners in JavaScript, be sure to check out the Event Listerners in JavaScript Tutorial.

Name Description
.on('blur', callback); Leaving a form element
.on('click', callback); Clicking on an element
.on('keydown', callback); Events binded to keyboard events down. Can also be applied to keypress and keyup.
.on('hover', callback); mouse event hover over an element
.on('focus', callback); when element is focused
.off(); Remove all event handlers from selector!

As shown in the table above, we also cover the .off(); event method in jQuery. The .off() event method basically removed any other event listener that you added to a specific selector. You can pass in parameters to only remove certain event listeners or only target deletegated selectors. 

I would recommend reading more on event handlers and specifically the .on() event handler on the jQuery API documentations to understand a little better how event methods work in jQuery. 

Want to see something that I haven't covered? Have questions? Ask below! 

To fork the fiddle and follow along:

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!