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. 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. 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. 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. 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. 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. 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

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo