jQuery Events: Click, Hover, Submit, and More

Learn jQuery event handling — .on(), .off(), event delegation, preventing defaults, and common events like click, hover, keyup, and submit.

Basic Event Binding with .on()

// .on(event, handler) is the modern standard
$('#btn').on('click', function() {
    $(this).text('Clicked!');
});

// Multiple events, one handler
$('#input').on('focus blur', function() {
    $(this).toggleClass('active');
});

// Shorthand methods (wrap .on internally)
$('#btn').click(function() { /* ... */ });
$('#form').submit(function(e) {
    e.preventDefault();  // stop form from submitting
});
$('#img').hover(
    function() { $(this).css('opacity', 0.7); },  // mouse in
    function() { $(this).css('opacity', 1); }     // mouse out
);

Event Delegation — Handling Dynamic Elements

// Problem: elements added after page load have no events attached
$('#list').append('
New
');
// $('.item').on('click'...) won't catch this new item!

// Solution: delegate to a parent that exists on page load
$('#list').on('click', '.item', function() {
    // 'this' is the clicked .item even if it was added dynamically
    $(this).addClass('selected');
});

// Also useful for performance: one handler for 100 rows
$('table').on('click', 'tr', function() {
    $(this).toggleClass('highlight');
});

The Event Object

$('#form').on('submit', function(e) {
    e.preventDefault();    // stop default browser behaviour
    e.stopPropagation();   // stop event bubbling to parent

    var name  = $('#name').val();
    var email = $('#email').val();
    console.log(e.type);   // "submit"
    console.log(e.target); // the form element
});

$('body').on('keydown', function(e) {
    if (e.key === 'Escape') $('#modal').hide();
    if (e.ctrlKey && e.key === 's') saveDraft();
});