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.

jquery event object

// 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();
});

In a jQuery event listener, an event object is passed into the event handler callback when an event occurs. The event object has several important properties such as type (the event type) and currentTarget (the individual DOM element upon which the event occurred).

jquery event.currentTarget attribute

// 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();
});

In a jQuery event listener callback, the event.currentTarget attribute only affects the individual element upon which the event was triggered, even if the listener is registered to a group of elements sharing a class or tag name.

jquery on method chaining

// 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 listener methods can be chained together to add multiple events to the same element.

jquery on method

// 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();
});

The jQuery .on() method adds event listeners to jQuery objects and takes two arguments: a string declaring the event to listen for (such as ‘click’), and the event handler callback function. The .on() method creates an event listener that detects when an event happens (for example: when a user clicks a button), and then calls the event handler callback function, which will execute any defined actions after the event has happened.

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