All the different visitors' actions that a web page can respond to are called events. An event represents the precise moment when something happens.
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. And below are also events.
jQuery enhances the basic event-handling mechanisms by offering the events methods for most native browser events, Here are some common DOM events:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click() | keypress() | submit() | load() |
| dblclick() | keydown() | change() | resize() |
| mouseenter() | keyup() | focus() | scroll() |
| mouseleave() | blur() | unload() |
In jQuery most DOM events have an equivalent jQuery method.
Create a click event to all paragraphs on a page:
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
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 $(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.
The click() method attaches an event handler function to an HTML element. And the function is executed when the user clicks on the HTML element
Example : When a click event fires on a <p> element; hide the current <p> element
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 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.
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
The jQuery mouseenter() method attach an event handler function to the selected elements that is executed when the mouse enters the HTML element.
The mouseleave() method attaches an event handler function to an HTML element. The function will execute when mouse moves from paragraph after hover the mouse on paragraph.
The mousedown() method attaches an event handler function to an HTML element. The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element
The mouseup() method attaches an event handler function to an HTML element. The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element
The focus() method attaches an event handler function to an HTML form field. The function is executed when the form field gets focus
The blur() method attaches an event handler function to an HTML form field. The function is executed when the form field loses focus
The on() method attaches one or more event handlers for the selected elements.Attach a click event to a <p> element
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.
$(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();
}
});
});
The jQuery scroll() method attach an event handler function to the window or scrollable iframes and elements that is executed whenever the element's scroll position changes.
The function will display a message when you scroll the browser window.
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
Attach multiple event handlers to a <p> element:
The jQuery change() method attach an 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.
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});