jQuery - jQuery Event Syntax

jQuery makes event handling in JavaScript much simpler. Events are actions that occur when the user interacts with the web page, such as clicking a button, moving the mouse, typing text, or submitting a form. jQuery provides shortcut methods and a general .on() method for handling events efficiently.

1. jQuery Event Syntax

Basic syntax:

$(selector).event(function(){
    // Code to run when event occurs
});

Example:

$("#btn").click(function(){
    alert("Button clicked!");
});

2. Common jQuery Event Methods

Event Description Example
click() When an element is clicked $("#btn").click(function(){ alert("Clicked"); });
dblclick() Double-click on an element $("#btn").dblclick(function(){ alert("Double Click"); });
mouseenter() Mouse pointer enters an element $("#box").mouseenter(function(){ $(this).css("background","yellow"); });
mouseleave() Mouse pointer leaves an element $("#box").mouseleave(function(){ $(this).css("background","white"); });
hover() Mouse enter + leave combined $("#box").hover(function(){ ... }, function(){ ... });
mousedown() Mouse button pressed on element $("#box").mousedown(function(){ alert("Mouse Down"); });
mouseup() Mouse button released on element $("#box").mouseup(function(){ alert("Mouse Up"); });
mousemove() Mouse moves over element $("#box").mousemove(function(e){ console.log(e.pageX, e.pageY); });
keydown() Keyboard key pressed $(document).keydown(function(e){ console.log(e.key); });
keyup() Keyboard key released $(document).keyup(function(e){ console.log(e.key); });
keypress() Keyboard key pressed (deprecated, use keydown/keyup) $("#input").keypress(function(){ ... });
focus() Element gains focus $("#input").focus(function(){ $(this).css("border","2px solid blue"); });
blur() Element loses focus $("#input").blur(function(){ $(this).css("border","1px solid gray"); });
change() Value of input/select changes $("#select").change(function(){ alert($(this).val()); });
submit() Form submission $("form").submit(function(e){ e.preventDefault(); alert("Submitted!"); });
resize() Window resized $(window).resize(function(){ console.log($(window).width()); });
scroll() Page or element scrolled $(window).scroll(function(){ console.log($(window).scrollTop()); });

3. Using .on() Method (Preferred Way)

.on() can attach one or multiple events to elements, even dynamically added elements:

$("#btn").on("click", function(){
    alert("Clicked using .on()!");
});

// Multiple events
$("#box").on("mouseenter mouseleave", function(){
    $(this).toggleClass("highlight");
});

// Event delegation (for dynamic elements)
$(document).on("click", ".dynamic-btn", function(){
    alert("Dynamic Button Clicked!");
});

4. Mouse Events

Event Trigger Description
click Single click
dblclick Double click
mouseenter Mouse enters element
mouseleave Mouse leaves element
mousedown Mouse button pressed
mouseup Mouse button released
mousemove Mouse moves over element
hover Mouse enter + leave combined (hover(in,out))

Example:

$("#box").hover(
    function(){ $(this).css("background", "yellow"); },
    function(){ $(this).css("background", "white"); }
);

5. Keyboard Events

Event Trigger Description
keydown Key pressed down
keyup Key released
keypress Key pressed (deprecated)

Example:

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

6. Form Events

Event Trigger Description
focus Input element gains focus
blur Input element loses focus
change Value of input/select changes
submit Form is submitted

Example:

$("form").submit(function(e){
    e.preventDefault(); // prevent form submission
    alert("Form Submitted!");
});

7. Document/Window Events

Event Description
ready DOM is fully loaded ($(document).ready())
resize Window resized
scroll Window scrolled

Example:

$(document).ready(function(){
    console.log("DOM is ready!");
});

$(window).resize(function(){
    console.log("Window width: " + $(window).width());
});

8. Event Methods

Method Description
.off(event) Remove event handler
.one(event) Attach handler that runs only once
.trigger(event) Manually trigger an event
.hover(in, out) Shortcut for mouseenter + mouseleave

Example:

$("#btn").one("click", function(){
    alert("This will run only once!");
});

9. Example: Combining Events

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Events</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function(){
        $("#btn").click(function(){
            $("#box").fadeToggle();
        });

        $("#box").mouseenter(function(){
            $(this).css("background","yellow");
        }).mouseleave(function(){
            $(this).css("background","skyblue");
        });

        $("form").submit(function(e){
            e.preventDefault();
            alert("Form Submitted!");
        });
    });
    </script>
</head>
<body>
    <button id="btn">Toggle Box</button>
    <div id="box" style="width:200px;height:100px;background:skyblue;margin:10px;">Hover me</div>
    <form>
        <input type="text" placeholder="Enter Name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>