jQuery Events

What are Events

Events are actions typically initiated by the user interacting with a web page, such as clicking a link or button, entering text into an input field or textarea, making a selection in a dropdown, pressing a key on the keyboard, or moving the mouse pointer. Sometimes, events are also triggered by the browser itself, such as when a page loads or unloads.

jQuery enhances the basic event-handling mechanisms by providing methods for handling most native browser events. Some of these methods include ready(), click(), keypress(), focus(), blur(), change(), and more. For example, to execute JavaScript code when the DOM is fully loaded, you can use the jQuery ready() method like this:

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

In general, events can be categorized into four main groups — mouse events, keyboard events, form events, and document/window events. The following section will provide a brief overview of all these events along with related jQuery methods one by one.

Mouse Events

A mouse event occurs when the user clicks an element or moves the mouse pointer, among other actions. Here are some commonly used jQuery methods for handling mouse events.

The click() Method

The jQuery click() method attaches an event handler function to selected elements for the "click" event. The attached function executes when the user clicks on that element. The following example demonstrates hiding <p> elements on a page when they are clicked.

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

The dblclick() Method

The jQuery dblclick() method attaches an event handler function to selected elements for the "dblclick" event. The attached function executes when the user double-clicks on that element. The following example demonstrates hiding the <p> elements when they are double-clicked.

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

The hover() Method

The jQuery hover() method attaches one or two event handler functions to selected elements. These functions execute when the mouse pointer enters and leaves the elements. The first function executes when the user places the mouse pointer over an element, while the second function executes when the user removes the mouse pointer from that element.

The following example highlights <p> elements when you hover over them; the highlighting is removed when you move the cursor away.

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

The mouseenter() Method

The jQuery mouseenter() method attaches an event handler function to selected elements that executes when the mouse enters the element. The following example adds the class highlight to the <p> element when you hover over it.

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

The mouseleave() Method

The jQuery mouseleave() method attaches an event handler function to selected elements that executes when the mouse leaves the element. The following example removes the class highlight from the <p> element when you move the cursor away from it.

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

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

Keyboard Events

A keyboard event is triggered when the user presses or releases a key on the keyboard. Here are some commonly used jQuery methods for handling keyboard events.

The keypress() Method

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

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

The keydown() Method

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

<script>
$(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 attaches an event handler function to selected elements (typically form controls) that executes when the user releases a key on the keyboard. The following example will display a message and indicate how many times the keyup event is fired when you press and release a key on the keyboard.

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

Form Events

A form event is triggered when a form control receives or loses focus, or when the user modifies a form control value, such as by typing text in a text input or selecting an option in a select box. Here are some commonly used jQuery methods to handle form events.

The change() Method

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

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

The focus() Method

The jQuery focus() method attaches an event handler function to selected elements (typically form controls and links) that executes when they gain focus. The following example will display a message when the text input receives focus.

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

The blur() Method

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

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

The submit() Method

The jQuery submit() method attaches an event handler function to <form> elements that executes when the user attempts to submit a form. The following example will display a message based on the value entered when you try to submit the form.

<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>

Document/Window Events

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

The ready() Method

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

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

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

The resize() Method

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

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

<script>
$(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 attaches an event handler function to the window or scrollable iframes and elements that executes whenever the element's scroll position changes.

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

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