SyntaxStudy
Sign Up
jQuery Beginner 9 min read

jQuery Events

jQuery Events

Common Events

$("button").click(function() { ... });
$("button").dblclick(function() { ... });
$("input").focus(function() { ... });
$("input").blur(function() { ... });
$("input").change(function() { ... });
$("input").keyup(function(e) { console.log(e.key); });
$("form").submit(function(e) { e.preventDefault(); ... });
$(window).resize(function() { ... });
$(window).scroll(function() { ... });

on() — Preferred

$("button").on("click", function() {
    console.log("Clicked!");
});

// Multiple events
$("input").on("focus blur", function() {
    $(this).toggleClass("active");
});

Event Delegation

// Works for dynamically added elements
$("ul").on("click", "li", function() {
    $(this).addClass("selected");
});
Pro Tip

Always use .on() over .click() / .bind() — it supports delegation and dynamic elements.