jQuery Event | jQuery Methods

Hello friends, today we will learn the event method of jquery and learn it in detail in which we will see some different types of events like this (mouse event, keyboard event, form event, and document event). Now below I will give some examples. By looking at what is written, you will get an idea of what is the event method of jQuery and how to use it.

What are Events?

Every one of the various guests’ activities that a site page can react to are called occasions.

An occasion addresses the exact second when something occurs.

Examples:

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

The expression “fires/terminated” is frequently utilized with occasions. Model: “The keypress occasion is terminated, the second you press a key”.

Here are some normal DOM occasions:

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 all Event methods step by step live Example:-

jQuery Syntax For Event Methods

In jQuery, most DOM occasions have an identical jQuery strategy.

To dole out a tick occasion to all sections on a page, you can do this:

$(“p”).click();

The subsequent stage is to characterize what ought to happen when the occasion fires. You should pass a capacity to the occasion:

$("p").click(function(){
  // action goes here!!
});

What Are Commonly Used jQuery Event Methods

$(document).ready()

The $(document).ready() strategy permits us to execute a capacity when the record is completely stacked. This occasion is as of now clarified in the jQuery Syntax part.

click()

The click() technique appends an occasion overseer capacity to an HTML component.

The capacity is executed when the client taps on the HTML component.

The accompanying model says: When a tick occasion fires on a <p> component; shroud the current <p> component:

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

dblclick()

The dblclick() strategy connects an occasion controller capacity to an HTML component.

The capacity is executed when the client double taps on the HTML component:

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

mouseenter()

The mouseenter() strategy joins an occasion controller capacity to an HTML component.

The capacity is executed when the mouse pointer enters the HTML component:

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

mouseleave()

The mouseleave() technique joins an occasion overseer capacity to an HTML component.

The capacity is executed when the mouse pointer leaves the HTML component:

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

mousedown()

The mousedown() technique connects an occasion controller capacity to an HTML component.

The capacity is executed, when the left, center, or right mouse button is pushed down, while the mouse is over the HTML component:

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

mouseup()

The mouseup() the 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!");
});

hover()

The hover() technique takes two capacities and is a blend of the mouseenter() and mouseleave() strategies.

The primary capacity is executed when the mouse enters the HTML component, and the subsequent capacity is executed when the mouse leaves the HTML component:

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

focus()

The focus() method connects an occasion overseer capacity to an HTML structure field.

The capacity is executed when the structure field gets focus:

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

blur()

The blur() method joins an occasion controller capacity to an HTML structure field.

The capacity is executed when the structure field loses blur:

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

The on() Method

The on() method connects at least one occasion overseers for the chose components.

Attach a click event to an <p> element:

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

Append various occasion controllers to a <p> component:

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});