jQuery Event Methods

Events are operations that web applications can detect.

jQuery provides a simple method to attach event handlers to selected elements.

The provided function will be executed when an event occurs.

The following are example events:

• Page load

• Click an element

• Move the mouse over an element

• Submit HTML form

• Keyboard keys, etc.

jQuery syntax for event methods

Most DOM events in jQuery have equivalent jQuery methods.

To assign the click event to all paragraphs on the page, perform the following operation:

$("p").click();

The next step is to define what should happen when an event occurs. You must pass a function to the event:

$("p").click(function(){
　　//　Action to be performed...
　　});

This example hides paragraphs on the page when clicked:

$("p").click(function(){
　　$(this).hide();
});

This example attaches a 'changeSize' function to the click event:

$(document).ready(function(){
　　$("p").click(changeSize);
});
function changeSize() {
　　$(this).animate({fontSize: "+=5px"});
}

Common jQuery event methods

$（document）.ready()

jQuery $(document).ready()The method specifies a function to be executed when the DOM is fully loaded.

The following example displays a message when the DOM is loaded:

$(document).ready(function(){
　　$("p").text("Now that the DOM has been loaded, it can be manipulated.");
});

click()

jQuery click()The method attaches an event handler function to the selected element.

The function will be executed when the user clicks the element:

$("p").click(function(){
　　$(this).css({"background-color":"#007FFF", "color":"white"});
});

mouseenter()

jQuery mouseenter()The method attaches an event handler function to the selected element.

The function will be executed when the mouse pointer enters the element:

$("p").mouseenter(function(){
　　$(this).css("background-color", "yellow");
});

mouseleave()

jQuery mouseleave()The method attaches an event handler function to the selected element.

The function will be executed when the mouse pointer leaves the element:

$("p").mouseleave(function(){
　　$(this).css("background-color", "lightblue");
});

mousedown()

jQuery mousedown()The method attaches an event handler function to the selected element.

The function will be executed when the user presses a mouse button on the element:

$("p").mousedown(function(){
　　$(this).after("<p style='color:red;'>Press the mouse button</p>");
});

mouseup()

jQuery mouseup()The method attaches an event handler function to the selected element.

The function will be executed when the mouse button is released while hovering over the element:

$("p").mouseup(function(){
　　$(this).after("<p style='color:green;'>Release the mouse button</p>");
});

keydown()

jQuery keydown()The method attaches an event handler function to the selected element.

The function will be executed when the user presses a key on the keyboard:

$("input").keydown(function(event){
　　$(this).css("background-color", "yellow");
　　$("span").text(event.type);
});

keyup()

jQuery keyup()The method attaches an event handler function to the selected element.

The function will be executed when the user releases a key on the keyboard:

$("input").keyup(function(event){
　　$(this).css("background-color", "lightblue");
　　$("span").text(event.type);
});

hover（）

jQuery hover()methods have two functions and aremouseenter()andmouseleave()methods when the mouse pointer hovers over the top.

The following example changes the background color of all<p>The background color of the element:

$("p").hover(function(){
　　$(this).css("background-color", "yellow");
　　}, function(){
　　$(this).css("background-color", "lightblue");
});

the on() method

jQuery provideson()a method to respond to any event on the selected element.

Useon()methods, we can attach one or more event handlers to the selected element.

The following example attaches a click event to all<p>Element:

$("p").on("click", function(){
　　$(this).css("background-color", "coral");
});

The following example attaches the mouseenter event to all<p>Element:

$("p").on("mouseenter", function(){
　　$(this).css("background-color", "coral");
});

The following example attaches multiple event handlers to<div>Element:

$("div").on("mouseenter mouseleave click", function(){
　　$(this).text(Math.random());
});

off() method

jQuery off() 　method removes theon()method attached to one or more event handlers.

The following example takes<div>Remove the mousemove event from the element:

$("button").click(function(){
　　$("div").off("mousemove");
});

Event object

jQuery's event system is based on the W3C standardizes the event object.

Ensure that the event object is passed to the event handler.

Each event handler function receives an event object that contains many properties and methods.

$("div").on("click", function(event){
　　alert("Event type is "　+　event.type);
　　alert("Target: "　+　event.target.innerHTML);
});

The following table shows all methods and properties of the event objects:

jQuery Event Reference

For a complete event reference, please visit ourjQuery Events Reference Manual.