jQuery Event

/

In this tutorial you will learn how to handle events with jQuery.

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function when Document is Ready in jQuery</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script> 
</head>
<body>
    <!--Contents will be inserted here-->
</body>
</html>

Note:The $(document).ready() is a jQuery 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 jQuery event 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 exacuted when the user clicks on that element. The following example will hide the <p> elements on a page when they are clicked.

<script type="text/javascript">
$(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 exacuted when the user double-clicks on that element. The following example will hide the <p> elements when they are double-clicked.

<script type="text/javascript">
$(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.

<script type="text/javascript">
$(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 jQuerymouseenter() 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.

<script type="text/javascript">
$(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.

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

Keyboard Events

A keyboard event is fired when the user press or release a key on the keyboard. Here’re some commonly used jQuery methods to handle the keyboard events.

The keypress() Method

The jQuery keypress() method attach an event handler function to the selected elements (typically form controls) that is executed when the browser receives keyboard input from the user. The following example will display a message when the kypress event is fired and how many times it is fired when you press the key on the keyboard.

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Note:The keypress event is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, Backspace or Delete, Arrow keys etc. trigger keydown events but not keypress events.

The keydown() Method

The jQuery keydown() method attach an event handler function to the selected elements (typically form controls) that is executed when the user first presses a key on the keyboard. The following example will display a message when the keydown event is fired and how many times it is fired when you press the key on the keyboard.

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

The keyup() Method

The jQuery keyup() method attach an event handler function to the selected elements (typically form controls) that is executed when the user releases a key on the keyboard. The following example will display a message when the keyup event is fired and how many times it is fired when you press and release a key on the keyboard.

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Tip:The keyboard events can be attached to any element, but the event is only sent to the element that has the focus. That’s why the keyboard events generally attached to the form controls such as text input box or textarea.

Form Events

A form event is fired when a form control receive or loses focus or when the user modify a form control value such as by typing text in a text input, select any option in a select box etc. Here’re some commonly used jQuery methods to handle the form events.

The change() Method

The jQuery change() method attach an jQuery event handler function to the <input>, <textarea>and <select> elements that is executed when its value changes. The following example will display an alert message when you select any option in dropdown select box.

<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

Note:For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the text input and textarea the event is fired after the element loses focus.

The focus() Method

The jQuery focus() method attach an event handler function to the selected elements (typically form controls and links) that is executed when it gains focus. The following example will display a message when the text input receive focus.

<script type="text/javascript">
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

The blur() Method

The jQuery blur() method attach an event handler function to the form elements such as<input>, <textarea>, <select> that is executed when it loses focus. The following example will display a message when the text input loses focus.

<script type="text/javascript">
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

The submit() Method

The jQuery submit() method attach an event handler function to the <form> elements that is executed when the user is attempting to submit a form. The following example will display a message depending on the value entered when you try to submit the form.

<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(event){
        var mob = /^[1-9]{1}[0-9]{9}$/;
        var enteredValue = $("#inputMobile").val();
        if(mob.test(enteredValue) == false && enteredValue != 10){
            $("p").html("Invalid mobile number").show().fadeOut(1000);
        } else{
            $("p").html("Valid mobile number").show().fadeOut(1000);
        }
        event.preventDefault();
    });
});
</script>

Tip:A form can be submitted either by clicking a submit button, or by pressing Enter when certain form elements have focus.

Document/Window Events

Events are also triggered in a situation when the page DOM (Document Object Model) is ready or when the user resize or scrolls the browser window, etc. Here  are some commonly used jQuery methods to handle such kind of events.

The ready() Method

The jQuery ready() method specify a function to execute when the DOM is fully loaded.

The following example will replace the paragraphs text as soon as the DOM hierarchy has been fully constructed and ready to be manipulated.

<script type="text/javascript">
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>

The resize() Method

The jQuery resize() method attach an event handler function to the window element that is executed when the size of the browser window changes.

The following jQuery Event example will display the current width and height of the browser window when you try to resize it by dragging its corners.

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

The scroll() Method

The jQuery scroll() method attach an jQuery Event handler function to the window or scrollable iframes and elements that is executed whenever the element’s scroll position changes.

The following example will display a message when you scroll the browser window.

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

This i all about handling jQuery Event. If you have any question related to this topic i.e. creating jQuery Event, you may raise a question at our Forum Section.