What are Events

Events are often triggered by the user’s interaction with the web page, such as when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, the mouse pointer is moved etc. In some cases, the Browser itself can trigger the events, such as the page load and unload events.

jQuery enhances the basic event-handling mechanisms by offering the events methods for most native browser events, some of these methods are ready(), click(), keypress(), focus(), blur(), change(), etc. For example, to execute some JavaScript code when the DOM is ready, you can use the jQuery ready() method, like this:

Example

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

Note: The $(document).ready() is an event that is used to manipulate a page safely with the jQuery. Code included inside this event will only run once the page DOM is ready i.e. when the document is ready to be manipulated.

In general, the events can be categorized into four main groups — mouse events, keyboard events, form events and document/window events. The following section will give you the brief overview of all these events as well as related jQuery methods one by one.

Mouse Events

A mouse event is fired when the user click some element, move the mouse pointer etc. Here’re some commonly used jQuery methods to handle the mouse events.

The click() Method

The jQuery click() method attach an event handler function to the selected elements for “click” event. The attached function is executed when the user clicks on that element. The following example will hide the <p> elements on a page when they are clicked.

Example

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

Note: The this keyword inside the jQuery event handler function is a reference to the element where the event is currently being delivered.

The dblclick() Method

The jQuery dblclick() method attach an event handler function to the selected elements for “dblclick” event. The attached function is executed when the user double-clicks on that element. The following example will hide the <p> elements when they are double-clicked.

Example

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>

The hover() Method

The jQuery hover() method attach one or two event handler functions to the selected elements that is executed when the mouse pointer enters and leaves the elements. The first function is executed when the user place the mouse pointer over an element, whereas the second function is executed when the user removes the mouse pointer from that element.

The following example will highlight <p> elements when you place the cursor on it, the highlighting will be removed when you remove the cursor.

Example

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

Tip: You can consider the hover() method is a combination of the jQuery mouseenter() and mouseleave() methods.

The mouseenter() Method

The jQuery mouseenter() method attach an event handler function to the selected elements that is executed when the mouse enters an element. The following example will add the class highlight to the <p> element when you place the cursor on it.

Example

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>

The mouseleave() Method

The jQuery mouseleave() method attach an event handler function to the selected elements that is executed when the mouse leaves an element. The following example will remove the class highlight from the <p> element when you remove the cursor from it.

Example

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

For more mouse event methods, please check out the jQuery Events Reference »