Description
Actions which can be detected by a web page is known an an event. jQuery easily responds to events in the HTML document page. jQuery Events are used to execute some javascript code, when something happens like on mouse over an element, button clicked etc.
Dynamic and responsive webpages can be created to respond at exact moment when something happen with the help of jQuery Event methods. jQuery syntax is very simple or more powerful.
Events
- browser events
- document loading events
- event object
- event attachment
- form events
- mouse events
- keyboard events
| mouse events | keyboard events | form events | document/window events |
|---|---|---|---|
| click | keypress | focus | load |
| dblclick | keydown | submit | unload |
| mouseenter | keyup | change | ready |
| hover | focusout | blur | scroll |
| mousemove | select | error |
More Info
- Mouse Click Event
- Mouse Enter Event
- Submit a Post or Form
- Mouse Move on element
- Web page loading
Description
The click() method will run when the user clicks on the selected HTML element. The attached function is executed when the user clicks on that element. The following example will show a alert message when clicked on 
elements on a page. Syntax:
$(selector).click(function)
[html]<html>
<head>
<title>jQuery click()</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<p>click on this paragraph</p>
</body>
</html>
[/html]
[javascript]
$(document).ready(function(){
$("p").click(function(){
alert("paragraph was clicked !");
})
});
[/javascript]
Output:
Description
The dblclick() method will run when the user double clicks on the selected HTML element. The attached function is executed when the user double-clicks on that element. The following example will show an alert message when double clicked on the 
elements. Syntax:
$(selector).dblclick(function)
[html]<html>
<head>
<title>jQuery dblclick()</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<p>double click on this paragraph</p>
</body>
</html>
[/html]
[javascript]
$(document).ready(function(){
$("p").dblclick(function(){
alert("paragraph was double clicked !");
})
});
[/javascript]
Output:
Description
The hover() method will run when the user mouseenter and mouseleave on the selected HTML element. The first function is executed when the user place the mouse pointer over an element, whereas the second function is executed when the user removes the mouse pointer from that element.
Syntax:
$(selector).hover(inFunction,outFunction)
[html]
<html>
<head>
<title>jQuery hover()</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<p>hover on this paragraph</p>
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("p").hover(function(){
$("p").text("Mouse In");
},
function(){
$("p").text("Mouse Out");
});
});
[/javascript]
Output:
Description
The focus() method will run when the element gets focus. The following example will display a message when the text input receive focus.
Syntax:
$(selector).focus(function)
[javascript]
$(document).ready(function() {
$("#name").focus(function(){
console.log("name field is focused.");
})
})
[/javascript]
Description
The keydown method is executed when a key is pressed down and the keyup method is executed when the pressed key is released.
Syntax: Keyup
$(selector).keyup(function)
Syntax: Keydown
$(selector).keydown(function)
[html]<html>
<head>
<title>jQuery keyup() and keydown()</title>
</head>
<body>
<h1>Welcome to SPLessons</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
</body>
</html>
[/html]
[javascript]
$(document).ready(function() {
$("#name").keyup(function(){
$("#name").css("background-color","yellow");
});
$("#name").keydown(function(){
$("#name").css("background-color","red");
});
});
[/javascript]
Output:
Key Points
- Actions which can be detected by a web page is known an an event.
- Click,hover,focus,key up and down are some of the jQuery events.