Learn jQuery: Event Handlers
In this course, you will learn how to link an event to effects using jQuery event handlers.
StartKey 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
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
- 1The 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…
- 2Another 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…
- 3One 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…
- 4jQuery 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…
- 5Have 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…
- 6In 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory