Learn jQuery: Event Handlers

In this course, you will learn how to link an event to effects using jQuery event handlers.

Start

Key Concepts

Review core concepts you need to learn to master this subject

jquery on event listeners

jquery event object

jquery event.currentTarget attribute

jquery on method chaining

jquery on method

jquery on event listeners

// A mouse event 'click'
$('#menu-button').on('click', () => {
  $('#menu').show();
});

// A keyboard event 'keyup'
$('#textbox').on('keyup', () => {
  $('#menu').show();
});

// A scroll event 'scroll'
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});

jQuery .on() event listeners support all common browser event types such as mouse events, keyboard events, scroll events and more.

Mouse Events

Lesson 1 of 1

1
Introduction to Mouse Events
The jQuery library provides a collection of methods that serve one of two purposes. - To listen for an event — an event (e.g. clicking a button) is something the user does to trigger an act…
Start
2
On 'mouseenter'
Another popular jQuery event listener is mouseenter. The mouseenter event triggers a callback function when a user enters the area that a targeted element occupies. To listen for a mouse enter eve…
Start
3
On 'mouseleave'
One issue with the behavior we added to our Sole Shoes website in the last exercise is that the menu remains in the DOM after the mouse leaves the menu area. The mouseleave event listener can dete…
Start
4
Chaining Events
jQuery also allows us to chain multiple methods. Instead of re-declaring the HTML element you’re selecting, you can append one event to another. Let’s see how we can use chaining to add hover fun…
Start
5
currentTarget
Have you noticed in our Sole Shoes website that when you mouse over one photo, all of the images zoom. That’s because .product-photo is a class on all the product photos. One way to solve this iss…
Start
6
Review: Event Handlers
In this lesson, you learned a few of the most common mouse events in the jQuery library. - Event handlers are comprised of an event listener and a callback function. An event listener specifies th…
Start