Lesson 5: jQuery Events | Learn jQuery with Interactive Examples

Introduction to jQuery Events

Events are actions that happen when users interact with your web page. jQuery makes it easy to respond to these events with simple, powerful syntax.

Why jQuery Events Matter:

Create interactive and responsive web applications
Enhance user experience with immediate feedback
Handle multiple event types with consistent syntax
Simplify complex event handling scenarios
Improve code readability and maintainability

The Document Ready Event

This essential event ensures jQuery code runs only after the DOM is fully loaded:

$(document).ready(function() {
    // jQuery code executes here
    console.log("DOM is fully loaded!");
});

Pro Tip: You can use the shorthand version $(function() { ... }) for the document ready event. This is more concise and widely used in modern jQuery code.

Mouse Events

Mouse events are triggered by user interactions with a pointing device (like a mouse).

Click Event

Execute code when an element is clicked:

Click me to see the effect!

$("#clickBox").click(function() {
    $(this).toggleClass("active");
    $(this).text("You clicked me! Click again to reset.");
});

Double Click Event

Trigger an action when an element is double-clicked:

Double-click me!

$("#dblclickBox").dblclick(function() {
    $(this).toggleClass("targeted");
    $(this).text("Double-click detected! Do it again.");
});

Hover Event

Combine mouseenter and mouseleave in a single method:

Hover over me!

$("#hoverBox").hover(
    function() { // mouseenter
        $(this).addClass("highlight");
        $(this).text("Mouse entered!");
    },
    function() { // mouseleave
        $(this).removeClass("highlight");
        $(this).text("Mouse left! Hover again.");
    }
);

Keyboard Events

Respond to user keyboard interactions with these events.

Key Events Demo

Type in the input field to see the events in action:

Keyboard events will appear here...

$("#keyInput").keydown(function(e) {
    logEvent("Key DOWN: " + e.key + " (Code: " + e.keyCode + ")");
});

$("#keyInput").keypress(function(e) {
    logEvent("Key PRESS: " + e.key);
});

$("#keyInput").keyup(function(e) {
    logEvent("Key UP: " + e.key);
});

function logEvent(msg) {
    $("#keyLog").prepend("> " + msg + "
");
}

Form Events

Handle user interactions with form elements.

Form Interaction Events

Try interacting with the form elements below:

// Focus event
$("#focusInput").focus(function() {
    $("#focusStatus").text("Input focused!").show();
}).blur(function() {
    $("#focusStatus").text("Input blurred!").show().delay(1500).fadeOut();
});

// Change event
$("#changeSelect").change(function() {
    $("#changeStatus").text("Selection changed to: " + $(this).val()).show();
});

// Submit event
$("#submitBtn").click(function(e) {
    e.preventDefault();
    $("#submitStatus").text("Form submitted!").show().delay(1500).fadeOut();
});

Document/Window Events

Events related to the browser window and document.

Resize Event

Resize your browser window to see the effect:

Current window size: Calculating...

$(window).resize(function() {
    const width = $(this).width();
    const height = $(this).height();
    $("#windowSize").text(width + "px × " + height + "px");
});

Scroll Event

Scroll in this container to see the event in action:

Scroll position: 0px

$(".demo-target").scroll(function() {
    const position = $(this).scrollTop();
    $("#scrollPosition").text(position);
});

Event Handling Best Practices

Follow these guidelines for efficient and maintainable event handling:

Use Event Delegation

Attach events to parent elements for dynamic content.

$("#parent").on("click", ".child", function() {
  // Handle event
});

Prevent Default Actions

Stop the browser's default behavior when needed.

$("a").click(function(e) {
  e.preventDefault();
  // Custom action
});

Debounce Resize/Scroll

Optimize performance for frequent events.

let timeout;
$(window).resize(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // Your code
  }, 250);
});

Clean Up Events

Remove event handlers when no longer needed.

// Remove specific handler
$("#element").off("click");

// Remove all handlers
$("#element").off();

Performance Tip: Be cautious when attaching events to window scroll/resize as they can fire rapidly. Always throttle or debounce these events to avoid performance issues.