What is jQuery Events

by

In every web application, we dose some actions to perform tasks. For example clicking on the button is a user’s action. An event represents the exact moment when something happens which is known as jQuery events.

Examples:

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

Here are some common DOM events are:

Mouse Events:
  • click
  • dbclick
  • mouseenter
  • mouseleave
KeyBoard Events:
  • keypress
  • keydown
  • keyup
Form Events:
  • submit
  • change
  • focus
  • blur
Document/window Events:
  • load
  • resize
  • scroll
  • unload

Event Methods are

Mouse Events:

click():

The click() method contains an function for event handing . Which is executed when the user click on the HTML element.

For Example:

when a click event fires on a <p> element, it will show the hide element.

$<"p">.click(function(){
  $(this).show();
});
dbclick():

the dbclick () method contain an function for event handing . which is executed when the user double click on the HTML element.

For Example:

$<"p">.dbclick(function(){
 $(this).show();
});
mouseenter():

The mouseenter() is executed when the mouse pointer enters the HTML element.

For example:

$(".myclass").mouseenter(function(){
 alert("yor entered myclass");
});
Mouseleave():

the mouseleave() function is executed when the mouse pointer leaves the HTML elements.

For example:

$(".test").mouseleave(function(){
  alert("Bye! you now leave test!");
});
mousedown():

This function is executed, when the mouse left, middle, or right button is pressed down, while the mouse is over the HTML element.

For example:

&(.test).mousedown(function(){
 alert("mouse down over test!");
});

mouseup()

This function is executed, when the mouse left, middle, or right button is released, while the mouse is over the HTML element.

For example:

&(.test).mousedown(function(){
 alert("mouse up over test!");
});

hover()

The hover() method takes two function that is the mouseenter()and the mouseleave(). 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:

For Example:

$(".myclass").hover(function(){
 alert("yor entered myclass");
}
functiion(){
alert("Bye! you now leave myclass!");
});
focus():

The focus() function in executed the form field gets focus.

For example:

$("input").focus(function(){
 $(this).css("color", "#aaa");
});
blur()

The blur() function is executed when the form field loses focus.

For example:

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

The on() Method

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

Attach a click event to a <p> element:

For example:

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

Recommended Posts:

Introduction of jQuery

jQuery-Selector

Reference:

w3school.com

Leave a Comment