jquery 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:

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

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

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

Example -

dblclick()

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.

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element:

Example

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

Example -

mouseenter()

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.

The mouseenter() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element:

Example

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

Example -

mouseleave()

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.

The mouseleave() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element:

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

Example -

mousedown()

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:

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

Example -

mouseup()

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:

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

Example -

hover()

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 hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

Example -

focus()

The focus() method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus:

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

Example -

blur()

The blur() method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

Example -

The on() Method

The on() method attaches one or more event handlers for the selected elements.

Attach a click event to a <p> element:

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

Example -