jQuery — Events

Click Event

$("button").click(function() {
    $(this).text("Clicked!");
});

on() Method

The modern way to bind events:

$("button").on("click", function() {
    $(this).toggleClass("active");
});

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

Common Events

Event	Description
click	Mouse click
dblclick	Double click
mouseenter	Mouse enters element
mouseleave	Mouse leaves element
hover	Mouse enter + leave
focus	Element gains focus
blur	Element loses focus
keydown	Key pressed down
keyup	Key released
submit	Form submitted
change	Input value changed
scroll	Page scrolled

Event Object

$("button").on("click", function(event) {
    console.log(event.type);    // "click"
    console.log(event.target);  // The clicked element
    console.log(event.pageX);   // Mouse X position
});

Preventing Defaults

$("a").on("click", function(event) {
    event.preventDefault();
    console.log("Link click blocked");
});

Stopping Propagation

$("div").on("click", function() {
    console.log("Div clicked");
});

$("button").on("click", function(event) {
    event.stopPropagation();
    console.log("Button clicked only");
});

Event Delegation

Bind to a parent for dynamically added elements:

$("ul").on("click", "li", function() {
    $(this).toggleClass("selected");
});

Unbinding Events

$("button").off("click");
$("button").off(); // Remove all events

One-Time Events

$("button").one("click", function() {
    $(this).text("Only once!");
});

Mini Practice

1. Bind a click event to a button
2. Use on() for multiple events
3. Prevent a link's default behavior
4. Use event delegation on a list

Up Next

Continue with Effects — visual effects and animations.