How to use jQuery Event Methods

Published on: February 4, 2018

Welcome to tutorial number 3 of the Easy jQuery series part of EasyProgramming.net!  What is an event in programming? It's pretty much anything that happens! It can be actions that your users take or something that happen automatically (such as a timed AJAX call). jQuery makes it easy by giving you access to easy to use event methods.

In this tutorial, we're gonna step it up a notch in this tutorial and go over event handlers! They are also interchangebly called event methods. We already covered event handlers in JavaScript, be sure to check out the onclick() event handler in JavaScript.

Here are some examples of event handlers in jQuery:

Name Description
$(selector).blur() Leaving a form element
$(selector).click() Clicking on an element
$(selector).dblclick() Double clicking on an element
$(selector).mouseenter() When mouse enters over an element (e.g. canvas)
$(selector).mouseleave() When mouse leaves an element
$(selector).ready() When an element has been loaded, used often on the whole document itself
$(selector).load() When an element/window/document has completed loading
$(selector).resize() When the document screen or window is resized
$(selector).scroll() When the document or window has been scrolled
$(selector).keydown()/.keypress()/.keyup() Events binded to keyboard events down, press, and up
$(selector).hover() mouse event hover over an element
$(selector).focus() when element is focused
$(selector).submit() When a form is submitted
$(selector).change() When something on a form is changed

These are just some examples! Get a complete list at https://api.jquery.com/category/events/.

Event handlers between jQuery and JavaScript is the concept is the same, the syntax is just a little different. We'll only cover a few event handlers to get you used to the idea. Once you know how one works, you know how they all work!

To fork the fiddle and follow along: https://jsfiddle.net/easyjs/am1y3hyf/

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

Resources:



Comments: