Event Helpers

jQuery provides shortcut methods for the most common events, so you don't always need to use .on().

Click Events

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

$("a").dblclick(function() {
    console.log("Double clicked!");
});

Mouse Events

$(".card").mouseenter(function() {
    $(this).css("box-shadow", "0 8px 24px rgba(0,0,0,0.15)");
}).mouseleave(function() {
    $(this).css("box-shadow", "0 2px 8px rgba(0,0,0,0.08)");
});

hover() — Combined Enter/Leave

$(".card").hover(
    function() {
        // Mouse enters
        $(this).addClass("hovered");
    },
    function() {
        // Mouse leaves
        $(this).removeClass("hovered");
    }
);

Form Events

// Focus and blur
$("input").focus(function() {
    $(this).addClass("focused");
}).blur(function() {
    $(this).removeClass("focused");
});

// Change event
$("select").change(function() {
    let value = $(this).val();
    console.log("Selected:", value);
});

// Input event (fires on every keystroke)
$("input[type='text']").on("input", function() {
    let count = $(this).val().length;
    $(".char-count").text(count + " characters");
});

// Submit
$("form").submit(function(e) {
    e.preventDefault();
    console.log("Form submitted!");
});

Keyboard Events

$(document).keydown(function(e) {
    if (e.key === "Escape") {
        $(".modal").fadeOut();
    }
});