jQuery Events

Events are often triggered when a user interacts with a web page, such as when a link or button is clicked, text is typed into an input box or textarea, or a selection is made in a select box. a key is hit on the keyboard, the mouse pointer is moved, and so on. In some circumstances, such as page load and unload events, the browser may initiate the event.

jQuery extends the fundamental event-handling capabilities by providing event methods for most native browser events, such as ready(), click(), keypress(), focus(), blur(), change(), and so on.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Event in jQuery</h1>
<button>Click me</button>

<script>
    $(document).ready(function (){
        $("button").click(function (){
            alert("Welcome to WebTutor");
        });
    });
</script>
</body>
</html>

Preview

The document $(document).ready() is an event used to safely transform a page using jQuery. The code in this event will be executed only after the page's DOM is complete i.e. When the document is ready to be updated.

You may use the jQuery ready() function to run JavaScript code when the DOM is ready, as seen below:

In general, events are classified into four types: mouse events, keyboard events, form events, and document/window events. The sections that follow will provide a quick overview of all of these events as well as associated jQuery methods one by one.

Mouse Events

When a user clicks an element or moves the mouse pointer, a mouse event is triggered. Here are some typical jQuery techniques for handling mouse events.

jQuery click() Method

The jQuery click() method adds an event handler function to the selected components for the "click" event. When the user clicks on the element, the associated function is called. The following example hides items on a page when they are clicked.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Click Event in jQuery</h1>
<button>Click me</button>

<script>
    $(document).ready(function (){
        $("button").click(function (){
            $("h1").css("color", "#00ab55");
        });
    });
</script>
</body>
</html>

Preview

jQuery dblclick() Method

The jQuery dblclick() method adds an event handler function to the selected item for the "dblclick" event. When the user double-clicks on the element, the associated function is called. When double-clicking on items, the following example will hide them.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Double-click Event in jQuery</h1>
<button>Double Click me</button>

<script>
    $(document).ready(function (){
        $("button").dblclick(function (){
            $("h1").css("color", "#ffc107");
        });
    });
</script>
</body>
</html>

Preview

jQuery hover() Method

jQuery's hover() method attaches one or two event handler functions to selected elements, which are run when the mouse cursor enters and exits the element. The first function is called when the user moves the mouse cursor over an element, and the second function is called when the user moves the mouse pointer away from that element. The following example highlights <p> elements when the cursor is placed over them; The highlighting is removed when the cursor is moved back.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-class { color: #ff4842 }
    </style>
</head>
<body>

<h1>Hover Event in jQuery</h1>
<p>Place mouse pointer on me.</p>

<script>
    $(document).ready(function (){
        $("p").hover(function(){
            $(this).addClass("text-class");
        }, function(){
            $(this).removeClass("text-class");
        });
    });
</script>
</body>
</html>

Preview

jQuery mouseenter() Method

When the mouse enters an element, the jQuery mouseenter() method invokes an event handler function that is run. When you set a pointer to a <p> element, as in the following example, the class highlight is added.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-class { color: #1890ff }
    </style>
</head>
<body>

<h1>Mouseenter Event in jQuery</h1>
<p>Place mouse pointer on me.</p>

<script>
    $(document).ready(function(){
        $("p").mouseenter(function(){
            $(this).addClass("text-class");
        });
    });
</script>
</body>
</html>

Preview

jQuery mouseleave() Method

When the mouse leaves an element, the jQuery mouseleave() method fires an event handler code that is run. When you remove the pointer from the <p> element in the following example, the square highlight is removed.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-class { color: #00ab55 }
    </style>
</head>
<body>

<h1>Mouseleave Event in jQuery</h1>
<p>Place mouse pointer on me.</p>

<script>
    $(document).ready(function(){
        $("p").mouseenter(function(){
            $(this).addClass("text-class");
        });
        $("p").mouseleave(function(){
            $(this).removeClass("text-class");
        });
    });
</script>
</body>
</html>

Preview

Keyboard Events

When a user presses or releases a key on the keyboard, a keyboard event is triggered. Here are some typical jQuery techniques for handling keyboard events.

jQuery keypress() Method

When the browser receives keyboard input from the user, the jQuery keypress() method attaches an event handler function to the selected components (usually form controls). The following example will show a message when the keypress event is fired and how many times it is fired when you press a key on the keyboard.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Keypress Event in jQuery</h1>
<input type="text">
<p>Keypress: <span>0</span></p>

<script>
    $(document).ready(function(){
        var x = 0;
        $('input[type="text"]').keypress(function(){
            $("span").text(x += 1);
        });
    });
</script>
</body>
</html>

Preview

jQuery keydown() Method

When the user first touches a key on the keyboard, the jQuery keydown() method attaches an event handler function to the selected item (usually a control) that is invoked. When you press a key on the keyboard, the following example will show a message indicating when and how many times the keydown event has fired.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Keydown Event in jQuery</h1>
<input type="text">
<p>Keydown: <span>0</span></p>

<script>
    $(document).ready(function(){
        var x = 0;
        $('input[type="text"]').keydown(function(){
            $("span").text(x += 1);
        });
    });
</script>
</body>
</html>

Preview

jQuery keyup() Method

When the user releases a key on the keyboard, the jQuery keyup() method attaches an event handler function to the selected components (usually form controls). When you press and release a key on the keyboard, the keyup event is triggered and the number of times it is fired is displayed in the following example.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Keyup Event in jQuery</h1>
<input type="text">
<p>Keyup: <span>0</span></p>

<script>
    $(document).ready(function(){
        var x = 0;
        $('input[type="text"]').keyup(function(){
            $("span").text(x += 1);
        });
    });
</script>
</body>
</html>

Preview

Form Events

When a form control receives or loses attention, or when the user modifies a form control value, such as by putting text into a text input or selecting any item in a pick box, a form event is called. Here are several popular jQuery ways for handling form events.

jQuery change() Method

When an input, textarea, or selection of an element changes, the jQuery change() method attaches an event handler code that is invoked. The following example will display an alert message when you select an option in the dropdown select box.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Change Event in jQuery</h1>
<form>
    <label>Language List:</label>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>
<p class="result"></p>

<script>
    $(document).ready(function(){
        $("select").change(function(){
            var Option = $(this).find(":selected").val();
            $(".result").text("You have selected: " + Option)
        });
    });
</script>
</body>
</html>

Preview

jQuery focus() Method

When a selected element (usually controls and form links) receives focus, the jQuery focus() method fires an event handler code that is run. The following example displays a message when the focus is on a text input.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        label span{ display: none; }
    </style>
</head>
<body>

<h1>Focus Event in jQuery</h1>
<form>
    <label>Name: <input type="text"> <span>Focus Fire</span></label>
</form>

<script>
    $(document).ready(function(){
        $("input").focus(function(){
            $(this).next("span").show().fadeOut("slow");
        });
    });
</script>
</body>
</html>

Preview

jQuery blur() Method

The jQuery blur() method adds an event handler function for creating components such as inputs, textareas, and selects when a form element loses focus. The following example will show a message when a text input loses focus.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        label span{ display: none; }
    </style>
</head>
<body>

<h1>Blur Event in jQuery</h1>
<form>
    <label>Name: <input type="text"> <span>Blur Fire</span></label>
</form>

<script>
    $(document).ready(function(){
        $("input").blur(function(){
            $(this).next("span").show().fadeOut("slow");
        });
    });
</script>
</body>
</html>

Preview

jQuery submit() Method

When a user tries to submit a form, the jQuery submit() method calls an event handler function attached to the form's elements, which is done. The following example will show a message based on the value you input when you try to submit the form.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Submit Event in jQuery</h1>
<form>
    <label>Name: <input type="text" value="WebTutor"></label>
    <input type="submit" value="Submit">
</form>

<script>
    $(document).ready(function(){
        $("form").submit(function(){
            alert("Submitted");
        });
    });
</script>
</body>
</html>

Preview

Document/Window Events

Events are also generated when the page's DOM (Document Object Model) is ready, or when the user resizes or scrolls the browser window, among other things. Here are several frequently used jQuery techniques for dealing with such occurrences.

jQuery ready() Method

When the DOM is fully loaded, the jQuery ready() method calls a function. The following example will replace the paragraph text when the DOM structure is complete and ready to be changed.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Ready Event in jQuery</h1>
<p></p>

<script>
    $(document).ready(function(){
        $("p").text("Learn to code for free");
    });
</script>
</body>
</html>

Preview

jQuery resize() Method

When the browser window is resized, jQuery's resize() method attaches an event handler function to the window element, which is executed. The following example will display the current width and height when you try to resize the browser window by moving its corners.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Resize Event in jQuery</h1>
<p></p>

<script>
    $(document).ready(function(){
        $(window).resize(function() {
            $(window).bind("resize", function(){
                $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
            });
        });
    });
</script>
</body>
</html>

Preview

jQuery scroll() Method

When the scroll position of an element changes, the jQuery scroll() method calls an event handler function attached to window or scrollable iframes and elements, which is done.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box {
            width: 250px;
            height: 250px;
            overflow: scroll;
        }
    </style>
</head>
<body>

<h1>Scroll Event in jQuery</h1>
<div class="box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div><br>
<span></span>

<script>
    var i = 0;
    $(document).ready(function(){
        $(".box").scroll(function(){
            $("span").text("Scrolled " + (i+= 1) + " times.");
        });
    });
</script>
</body>
</html>

Preview

FAQs

jQuery events are actions or occurrences that happen on a web page, such as a button click, mouse movement, or form submission. jQuery provides a comprehensive set of event methods that allow you to attach event handlers to elements and execute code when events occur. Event handling in jQuery involves selecting the desired element(s) using selectors and then using event methods like click(), mouseover(), or submit() to bind functions to those events. jQuery events provide a convenient way to enhance interactivity and responsiveness in web applications by executing specific actions in response to user interactions or other events.

jQuery provides several methods to attach event handlers to elements. The most common method is to use the on() method, which allows you to attach one or more event handlers to selected elements. For example, $('button').on('click', function() { /* code to execute on button click */ }) attaches a click event handler to all <button> elements on the page. You can also use shortcut methods like click(), mouseenter(), or submit() to attach specific event handlers. Additionally, jQuery provides delegated event handling using the on() method, which allows you to attach event handlers to elements that may be added dynamically to the page. By attaching event handlers to elements, you can define the behavior and actions to be executed when the specified events occur.

In jQuery, you can prevent the default behavior of an event and stop it from propagating further through the DOM tree. To prevent the default behavior of an event, you can use the preventDefault() method within the event handler. For example, event.preventDefault() can be called within a click event handler to prevent a link from navigating to its default URL. To stop the event propagation, you can use the stopPropagation() method. This prevents the event from triggering any additional event handlers on parent elements. For instance, event.stopPropagation() can be used within a click event handler to prevent the event from bubbling up to higher-level elements. By utilizing these techniques, you can control the behavior of events and customize the interaction experience in your web application.

jQuery Selectors

jQuery Hide/Show

jQuery Events

Example

Mouse Events

jQuery click() Method

Example

jQuery dblclick() Method

Example

jQuery hover() Method

Example

jQuery mouseenter() Method

Example

jQuery mouseleave() Method

Example

Keyboard Events

jQuery keypress() Method

Example

jQuery keydown() Method

Example

jQuery keyup() Method

Example

Form Events

jQuery change() Method

Example

jQuery focus() Method

Example

jQuery blur() Method

Example

jQuery submit() Method

Example

Document/Window Events

jQuery ready() Method

Example

jQuery resize() Method

Example

jQuery scroll() Method

Example

FAQs

Links

Tutorials

Connect with us

jQuery Events

Example

Mouse Events

jQuery click() Method

Example

jQuery dblclick() Method

Example

jQuery hover() Method

Example

jQuery mouseenter() Method

Example

jQuery mouseleave() Method

Example

Keyboard Events

jQuery keypress() Method

Example

jQuery keydown() Method

Example

jQuery keyup() Method

Example

Form Events

jQuery change() Method

Example

jQuery focus() Method

Example

jQuery blur() Method

Example

jQuery submit() Method

Example

Document/Window Events

jQuery ready() Method

Example

jQuery resize() Method

Example

jQuery scroll() Method

Example

FAQs

What are jQuery events and how are they used?

How do you attach event handlers to elements using jQuery?

How do you prevent default behavior and stop event propagation in jQuery?