jQuery Events

jQuery provides a set of event methods that are used to handle different types of user interactions and browser events. These methods allow developers to add interactivity to their websites.

1. Mouse Events

Event	Description	Example
`click`	Triggered when the element is clicked.	`$("#btn").click(function() { alert("Clicked!"); });`
`dblclick`	Triggered when the element is double-clicked.	`$("#btn").dblclick(function() { alert("Double Clicked!"); });`
`mousedown`	Triggered when the mouse button is pressed down.	`$("#div").mousedown(function() { alert("Mouse Down!"); });`
`mouseup`	Triggered when the mouse button is released.	`$("#div").mouseup(function() { alert("Mouse Up!"); });`
`mouseenter`	Triggered when the mouse enters the element.	`$("#div").mouseenter(function() { alert("Mouse Entered!"); });`
`mouseleave`	Triggered when the mouse leaves the element.	`$("#div").mouseleave(function() { alert("Mouse Left!"); });`
`mousemove`	Triggered when the mouse moves within the element.	`$("#div").mousemove(function(e) { console.log("X: " + e.pageX + ", Y: " + e.pageY); });`
`mouseover`	Triggered when the mouse is moved over the element or its child elements.	`$("#div").mouseover(function() { alert("Mouse Over!"); });`
`mouseout`	Triggered when the mouse is moved out of the element or its child elements.	`$("#div").mouseout(function() { alert("Mouse Out!"); }); });`

2. Keyboard Events

Event	Description	Example
`keydown`	Triggered when a key is pressed.	`$(document).keydown(function(e) { console.log(e.key); });`
`keypress`	Triggered when a key is pressed (deprecated).	`$(document).keypress(function(e) { console.log(e.key); });`
`keyup`	Triggered when a key is released.	`$(document).keyup(function(e) { console.log(e.key); });`

3. Form Events

Event	Description	Example
`blur`	Triggered when an element loses focus.	`$("#input").blur(function() { alert("Lost focus!"); });`
`focus`	Triggered when an element gains focus.	`$("#input").focus(function() { alert("Gained focus!"); });`
`focusin`	Triggered when an element or its descendant gains focus.	`$("form").focusin(function() { alert("Focus In!"); });`
`focusout`	Triggered when an element or its descendant loses focus.	`$("form").focusout(function() { alert("Focus Out!"); });`
`change`	Triggered when the value of an element changes.	`$("#dropdown").change(function() { alert("Value changed!"); });`
`submit`	Triggered when a form is submitted.	`$("form").submit(function(e) { e.preventDefault(); alert("Form submitted!"); });`
`select`	Triggered when text is selected in an input field.	`$("#input").select(function() { alert("Text selected!"); });`

4. Document/Window Events

Event	Description	Example
`ready`	Triggered when the DOM is fully loaded.	`$(document).ready(function() { alert("DOM Ready!"); });`
`resize`	Triggered when the browser window is resized.	`$(window).resize(function() { alert("Window resized!"); });`
`scroll`	Triggered when the element or document is scrolled.	`$(window).scroll(function() { alert("Page scrolled!"); });`
`unload`	Triggered when the user leaves the page.	`$(window).unload(function() { alert("Page unloaded!"); });`

5. Event Helpers

Helper Method	Description	Example
`hover`	A shorthand for `mouseenter` and `mouseleave`.	`$("#div").hover(function() { alert("Hovered In!"); }, function() { alert("Hovered Out!"); });`
`toggle`	A shorthand for toggling between events (deprecated).	`$("#btn").toggle(function() { alert("On!"); }, function() { alert("Off!"); });`

6. Custom Events

Event	Description	Example
`on`	Binds an event to elements (including dynamically added ones).	`$("#btn").on("click", function() { alert("Clicked!"); });`
`off`	Removes an event handler.	`$("#btn").off("click");`
`trigger`	Manually triggers an event.	`$("#btn").trigger("click");`
`triggerHandler`	Triggers an event without bubbling.	`$("#btn").triggerHandler("click");`

7. Event Object Properties

Property	Description	Example
`pageX` / `pageY`	The mouse pointer’s position relative to the document.	`$(document).click(function(e) { console.log(e.pageX, e.pageY); });`
`which`	The mouse button or key pressed.	`$(document).keydown(function(e) { console.log(e.which); });`
`type`	The type of the event.	`$("div").click(function(e) { console.log(e.type); });`
`target`	The DOM element that triggered the event.	`$("div").click(function(e) { console.log(e.target); });`
`stopPropagation`	Stops event propagation.	`$("div").click(function(e) { e.stopPropagation(); });`
`preventDefault`	Prevents the default action of the event.	`$("a").click(function(e) { e.preventDefault(); });`

Example: Using Multiple jQuery Events

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Events Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            // Mouse Event: Click
            $("#btn").click(function() {
                alert("Button clicked!");
            });

            // Keyboard Event: Keydown
            $("#input").keydown(function(e) {
                console.log("Key pressed: " + e.key);
            });

            // Form Event: Focus
            $("#input").focus(function() {
                $(this).css("background-color", "yellow");
            }).blur(function() {
                $(this).css("background-color", "white");
            });

            // Document Event: Scroll
            $(window).scroll(function() {
                console.log("You are scrolling!");
            });
        });
    </script>
</head>
<body>
    <button id="btn">Click Me</button>
    <br><br>
    <input type="text" id="input" placeholder="Type something">
    <br><br>
    <div style="height: 2000px; background: linear-gradient(to bottom, #ff9a9e, #fad0c4);">
        Scroll down to see the scroll event in action.
    </div>
</body>
</html>

Try It Now

This example demonstrates the use of multiple jQuery events like click, keydown, focus, blur, and scroll.