jQuery Events

Learn about jQuery events in this section. In most web applications, the user performs actions to trigger operations. For example, clicking a save button to save data triggers a click event and its handler function.

jQuery Event Methods

The jQuery library provides methods to handle DOM events. Most jQuery methods correspond to native DOM events.

Category jQuery Method DOM Event
Form events blur onblur
change onchange
focus onfocus
focusin onfocusin
select onselect
submit onsubmit
Keyboard events keydown onkeydown
keypress onkeypress
keyup onkeyup
Mouse events click onclick
dblclick ondblclick
mousedown onmousedown
mouseenter onmouseenter
mouseleave onmouseleave
mousemove onmousemove
mouseout onmouseout
mouseover onmouseover
mouseup onmouseup
Browser events error onerror
resize onresize
scroll onscroll
Document loading load onload
ready
unload onunload

Event Handling

Handle DOM events using jQuery methods by selecting DOM element(s) and invoking the appropriate jQuery event method.

Handle Button Click Event

Syntax

$('#saveBtn').click(function () {
    alert('Save button clicked');
});

Event Object

jQuery passes an event object to every event handler, providing properties and methods for cross-browser consistency (e.g., target, pageX, pageY, relatedTarget).

Syntax

$('#saveBtn').click(function (eventObj) {
    alert('X =' + eventObj.pageX + ', Y =' + eventObj.pageY);
});

this Keyword in Event Handler

The this keyword in an event handler refers to the DOM element that triggered the event.

Syntax

$(':button').click(function (eventObj) {
    alert(this.value + ' ' + this.type + ' clicked');
});

Hover Events

jQuery provides methods for mouse hover events such as mouseenter, mouseleave, mousemove, mouseover, mouseout, and mouseup.

Syntax

$('#myDiv').mouseenter(function () {
    $(this).css('background-color', 'green');
});
$('#myDiv').mouseleave(function () {
    $(this).css('background-color', 'red');
});

Using hover() Method

Use the hover() method to handle both mouseenter and mouseleave events.

Syntax

$('#myDiv').hover(
    function () {
        $(this).css('background-color', 'green');
    },
    function () {
        $(this).css('background-color', 'red');
    }
);

Event Binding using on()

Use the on() method to attach event handlers to elements. This method provides more flexibility compared to shorthand methods.

Syntax

$('#saveBtn').on('click', function () {
    alert('Save Button clicked');
});

Filter descendants of selected elements using a selector.

Syntax

$('#myDiv').on('click', ':button', function () {
    alert('Button clicked');
});

Binding Multiple Events

Specify multiple event types separated by a space to bind multiple events to an element.

Syntax

$('#myDiv').on('mouseenter mouseleave', function() {
    $(this).text('The mouse entered or left the div');
});

Specify Named Function as Event Handler

Create separate functions and specify them as handlers. This approach is useful for reusing handlers across different events or elements.

Syntax

var mouseHandler = function() {
    alert('The mouse entered');
};
$('#myDiv').on('mouseenter', mouseHandler);

The jQuery on() method replaces live() and delegate() methods.

Event Bubbling

Event bubbling is demonstrated in the example below.

Syntax

$('div').click(function (event) {
    alert(event.target.tagName + ' clicked');
});

in the above example, clicking on a element will display an alert message 'SPAN clicked' even though we have not handled the click event of . This is called event bubbling.

Points to Remember

  • The jQuery event methods allow you to attach an event handler or fire native DOM events.
  • Use the selector to get the reference of an element(s) and then call jQuery event methods to fire it or attach an event handler.
  • Important DOM manipulation methods: click(), dblClick(), change(), submit(), keyup(), keydown(), mouseenter(), mouseleave(), hover(), etc.