The Event Object in jQuery

When an event fires, jQuery passes an event object to your handler function containing useful information about the event.

Accessing the Event Object

$("button").click(function(event) {
    console.log(event.type);       // "click"
    console.log(event.target);     // The DOM element clicked
    console.log(event.timeStamp);  // When the event occurred
});

Mouse Event Properties

$(document).click(function(e) {
    console.log(e.pageX, e.pageY);     // Position relative to document
    console.log(e.clientX, e.clientY); // Position relative to viewport
    console.log(e.which);              // Mouse button (1=left, 2=middle, 3=right)
});

Keyboard Event Properties

$(document).keydown(function(e) {
    console.log(e.key);      // "a", "Enter", "Escape"
    console.log(e.keyCode);  // Numeric key code
    console.log(e.ctrlKey);  // Was Ctrl held?
    console.log(e.shiftKey); // Was Shift held?
    console.log(e.altKey);   // Was Alt held?
});

preventDefault()

Stops the default browser action:

// Prevent link navigation
$("a").click(function(e) {
    e.preventDefault();
    console.log("Link click prevented!");
});

// Prevent form submission
$("form").submit(function(e) {
    e.preventDefault();
    // Handle form with JavaScript instead
});

stopPropagation()

Prevents the event from bubbling up to parent elements:

$(".inner").click(function(e) {
    e.stopPropagation();
    console.log("Inner clicked — parent won't fire!");
});

$(".outer").click(function() {
    console.log("Outer clicked");  // Won't fire if inner is clicked
});

Event Delegation with event.target

$("ul").click(function(e) {
    let $clicked = $(e.target);
    if ($clicked.is("li")) {
        $clicked.toggleClass("done");
    }
});