Jquery Event

jQuery Event Methods

---

jQuery is tailor-made to answer to events inwards an HTML page.

---

What are Events?

All the dissimilar visitor's actions that a spider web page tin answer to are called events.
An consequence represents the precise minute when something happens.
Examples:

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

The term "fires/fired" is oftentimes used amongst events. Example: "The keypress consequence is fired, the minute yous press a key".
Here are about mutual DOM 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 Syntax For Event Methods

In jQuery, close DOM events conduct maintain an equivalent jQuery method.
To assign a click consequence to all paragraphs on a page, yous tin produce this:

$("p").click();

The adjacent footstep is to define what should survive on when the consequence fires. You must overstep a share to the event:

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

---

Commonly Used jQuery Event Methods

$(document).ready()
The $(document).ready() method allows us to execute a share when the document is fully loaded. This consequence is already explained inwards the jQuery Syntax chapter.
click()
The click() method attaches an consequence handler share to an HTML element.
The share is executed when the user clicks on the HTML element.
The next instance says: When a click consequence fires on a <p> element; cover the electrical flow <p> element:

Example

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

dblclick()
The dblclick() method attaches an consequence handler share to an HTML element.
The share is executed when the user double-clicks on the HTML element:

Example

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

mouseenter()
The mouseenter() method attaches an consequence handler share to an HTML element.
The share is executed when the mouse pointer enters the HTML element:

Example

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

mouseleave()
The mouseleave() method attaches an consequence handler share to an HTML element.
The share is executed when the mouse pointer leaves the HTML element:

Example

$("#p1").mouseleave(function(){
    alert("Bye! You at in i lawsuit survive out p1!");
});

mousedown()
The mousedown() method attaches an consequence handler share to an HTML element.
The share is executed, when the left, midpoint or correct mouse push is pressed down, piece the mouse is over the HTML element:

Example

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

mouseup()
The mouseup() method attaches an consequence handler share to an HTML element.
The share is executed, when the left, midpoint or correct mouse push is released, piece the mouse is over the HTML element:

Example

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

hover()
The hover() method takes 2 functions in addition to is a combination of the mouseenter() in addition to mouseleave() methods.
The commencement share is executed when the mouse enters the HTML element, in addition to the 2nd share is executed when the mouse leaves the HTML element:

Example

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You at in i lawsuit survive out p1!");
});

focus()
The focus() method attaches an consequence handler share to an HTML shape field.
The share is executed when the shape land gets focus:

Example

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

blur()
The blur() method attaches an consequence handler share to an HTML shape field.
The share is executed when the shape land loses focus:

Example

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

---

The on() Method

The on() method attaches i or to a greater extent than consequence handlers for the selected elements.
Attach a click consequence to a <p> element:

Example

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

Attach multiple consequence handlers to a <p> element:

Example

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

---