to respond to events in an HTML page
All the different visitor's actions that a web page can respond to are called events .
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events. (Example: "The keypress event is fired, the moment you press a key".)
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
most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page :
$("p").click();
The next step is to define what should happen when the event fires.
You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods
$(document).ready()click()dblclick()mouseenter()mouseleave()mousedown()mouseup()hover()focus()blur()on()
The $(document).ready() method allows us to execute a function when the document is fully loaded .
The click() method attaches an event handler function to an HTML element .
The function is executed when the user clicks on the HTML element.
The following example says:
When a click event fires on a <p> element; hide the current <p> element:
$("p").click(function(){
$(this).hide();
});
The function is executed when the user double-clicks on the HTML element :
$("p").dblclick(function(){
$(this).hide();
});
The function is executed when the mouse pointer enters the HTML element :
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
The function is executed when the mouse pointer leaves the HTML element :
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
The function is executed, when the left, middle or right mouse button is pressed down , while the mouse is over the HTML element :
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
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!");
});
The hover() method :
takes two functions :
The first function is executed when the mouse enters the HTML element
the second function is executed when the mouse leaves the HTML element
= **a combination of the mouseenter() and mouseleave() methods
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
The focus() method attaches an event handler function to an HTML form field
The function is executed when the form field gets focus :
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
The blur() method attaches an event handler function to an HTML form field
The function is executed when the form field loses focus :
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
The on() method attaches one or more event handlers for the selected elements
Attach a click event to a <p> element:
$("p").on("click", function(){
$(this).hide();
});
Attach multiple event handlers to a <p> element:
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
