How to use jQuery events ?

In jQuery, most of the events have an equivalent jQuery method.

Example :  Assign a click event to all paragraphs on a page

$("p").click(function() {

  // Your actions here

});

jQuery Event methods

$(document).ready()

Allows us to execute a function when the document is fully loaded.

click()

Executed when the user clicks on the HTML element.

Example : When a click event fires on a <p> element; hide the current <p> element

$("p").click(function() {

  $(this).hide();

});

dblclick()

Executed when the user double-clicks on the HTML element:

$("p").dblclick(function() {

  $(this).hide();

});

mouseenter()

Executed when the mouse pointer enters the HTML element

$("#p1").mouseenter(function() {

  alert("You entered p1!");

});

mouseleave()

Executed when the mouse pointer leaves the HTML element

$("#p1").mouseleave(function() {

  alert("Bye! You now leave p1!");

});

mousedown()

Executed when the left mouse button is pressed down, while the mouse is over the HTML element

$("#p1").mousedown(function() {

  alert("Mouse down over p1!");

});

mouseup()

Executed when the left mouse button is released, while the mouse is over the HTML element

$("#p1").mouseup(function() {

  alert("Mouse up over p1!");

});

hover()

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!");

});

focus()

Executed when the form field gets focus

$("input").focus(function() {

  $(this).css("background-color","#cccccc");

});

blur()

Executed when the form field loses focus

$("input").blur(function() {

  $(this).css("background-color","#ffffff");

});