Scribd
Upload
61 views

Learn JQuery - Learn JQuery - Event Handlers Cheatsheet - Codecademy

The document discusses jQuery event handlers and the .on() method. It provides examples of adding click, keyup, scroll, mouseenter, and mouseleave event listeners to elements and executing callback functions. The event object passed to callbacks contains properties like type and currentTarget, referring to the specific element the event occurred on. Event listeners can be chained onto a single element to handle multiple event types.

Uploaded by

ilias ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

Learn JQuery - Learn JQuery - Event Handlers Cheatsheet - Codecademy

The document discusses jQuery event handlers and the .on() method. It provides examples of adding click, keyup, scroll, mouseenter, and mouseleave event listeners to elements and executing callback functions. The event object passed to callbacks contains properties like type and currentTarget, referring to the specific element the event occurred on. Event listeners can be chained onto a single element to handle multiple event types.

Uploaded by

ilias ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Cheatsheets / Learn jQuery

Learn jQuery: Event Handlers


jquery on event listeners
jQuery .on() event listeners support all common
browser event types such as mouse events, keyboard // A mouse event 'click'

events, scroll events and more. $('#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 event object


In a jQuery event listener, an event object is passed into
the event handler callback when an event occurs. The // Hides the '#menu' element when it has
event object has several important properties such as been clicked.

type (the event type) and currentTarget (the individual $('#menu').on('click', event => {
DOM element upon which the event occurred). // $(event.currentTarget) refers to the
'#menu' element that was clicked.
$(event.currentTarget).hide();

});

jquery event.currentTarget attribute


In a jQuery event listener callback, the
event.currentTarget attribute only affects the individual // Assuming there are several elements
element upon which the event was triggered, even if the with the

listener is registered to a group of elements sharing a // class 'blue-button',


class or tag name. 'event.currentTarget' will

// refer to the individual element that


was clicked.

$('.blue-button').on('click', event => {

$(event.currentTarget).hide();

});
jquery on method chaining
jQuery .on() event listener methods can be chained
together to add multiple events to the same element. // Two .on() methods for 'mouseenter' and

// 'mouseleave' events chained onto the

// '#menu-button' element.

$('#menu-button').on('mouseenter', () => {

$('#menu').show();

}).on('mouseleave', () => {

$('#menu').hide();

});

jquery on method
The jQuery .on() method adds event listeners to jQuery
objects and takes two arguments: a string declaring the //The .on() method adds a 'click' event to
event to listen for (such as ‘click’), and the event handler the '#login' element. When the '#login'
callback function. The .on() method creates an event element is clicked, the callback function
listener that detects when an event happens (for example:
will be executed, which reveals the
when a user clicks a button), and then calls the event
'#login-form' to the user.

handler callback function, which will execute any defined


actions after the event has happened.
$('#login').on('click', () => {

$('#login-form').show();

});

You might also like