jQuery events with examples

We have learn about the syntax of jQuery. The syntax have two major part in it, one the selector and other the events. We already gone through the lists of selectors, now time to take few step toward the jQuery events.

What are Events?

The action of the user to which the browser response from the web page is the event.  The event is either mouse click, key press, radio button or checkbox selection etc.

Like javascript, jQuery act on the DOM events. Below is list of few 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

jQuery Events Examples

Example 1: click event

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

This will select the p element and on click by user hide it.

Example 2: mouse hover event

$("#mousehover").hover(function(){
alert("You mouser the element!");
});

This function will alert the message, when mouser is hover over the element with id mousehover.

Example 3: blur event

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

This function will on blur over any input element, changes the background color of that element to yellow.
Example4: focus event

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

This function will on focus over any input element, changes the background color of that element to red. When focus is out it will back to it original color (backed by blur).

Example 5: change event

$("input").change(function(){
 alert("Text successfully changed.");
 $(this).css("background-color","#ccc");
 });

This function will alert the message and changes background color  to mentioned color code of  input element. This happens when text is tried to changed in the input element.

Example 6: keypress event

$("input").keypress(function(){
 $("span").text(i+=1);
 });

This function will add up the text count by one, each time a key get pressed by user.

Example 7: select event

$("input").select(function(){
 alert("Text selected!");
 });

This function will alert the message when the text inside input element is selected.

Example 8: submit event

$("form").submit(function(){
 alert("Submitted");
 });

This event alert if form with name attribute of  'form' get submitted by user on submit button click.

Example 9: scroll event

$("div").scroll(function(){
 $("span").text(x+=1);
 });

This event will count and increase the number by one in text as user scroll either up or down.

Example 10: ready event

This is most important event. The ready event occurs when the DOM (document object model) has been loaded, and the page has been fully loaded (including images). Since this event loads as DOM load so it is a good practice to place all the other jQuery events and functions inside it.

$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("input").keypress(function(){
$("span").text(i+=1);
});
});

As seen this event perform other two task as mentioned above.