? jQuery Events

? Quick Overview

jQuery Events allow you to respond to user interactions like clicks, key presses, mouse movements, form submissions, and more. They make web pages interactive and dynamic with minimal JavaScript code.

? Key Concepts

Events are user or browser actions
jQuery simplifies event handling
Multiple events can be attached easily
Supports chaining and delegation

? Syntax / Theory

Basic syntax for attaching an event in jQuery:

? View Code Example

// Attach a click event to a button
$("button").click(function(){
alert("Button clicked");
});

? Common jQuery Events

click()
dblclick()
mouseenter()
mouseleave()
keydown()
keyup()
submit()
change()

? Code Example(s)

? View Code Example

// Change text when paragraph is clicked
$("p").click(function(){
$(this).text("You clicked the paragraph");
});

? Live Output / Explanation

When the paragraph is clicked, the text inside it changes instantly. This demonstrates how jQuery listens for events and executes callback functions.

? Interactive Example

? View Code Example

// Button hover & click interaction
$("#demo-box").on({
  mouseenter: function(){
    $(this).css("opacity", "0.7");
    $("#event-log").text("Event: Mouse Enter ?️");
  },
  mouseleave: function(){
    $(this).css("opacity", "1");
    $("#event-log").text("Event: Mouse Leave ?");
  },
  click: function(){
    $(this).css("transform", "scale(0.95)");
    $("#event-log").text("Event: Clicked! ?");
    setTimeout(() => $(this).css("transform", "scale(1)"), 150);
  }
});

Hover or Click Me!

Event status: Waiting for interaction...

?️ Use Cases

Form validation
Dynamic UI updates
Modal popups
Navigation menus
Games and animations

✅ Tips & Best Practices

Use on() for better flexibility
Prefer event delegation for dynamic elements
Avoid inline JavaScript
Keep event handlers small and clean

? Try It Yourself

Create a button and alert on click
Change background color on hover
Display key pressed by user
Disable form submission using events