Learning the jquery selector, you can add event handling for selected HMTL tags or elements, including keystrokes, mice, click Buttons, and so on.
The following are common DOM events:
Mouse events |
Keyboard events |
Form Events |
Document/Window Events |
Click |
KeyPress |
Submit |
Load |
DBLC Lick |
KeyDown |
Change |
Resize |
MouseEnter |
Key up |
Focus |
Scroll |
MouseLeave |
|
Blur |
Unload |
The syntax for jquery event handling
In jquery, most DOM events have corresponding jquery events, such as adding click event handling for all
$ ("P"). Click ();
Next add the handler function for the Click event, you must pass a callback function to the Click event:
$ ("P"). Click (function () {
//action goes here!!
});
Common jquery Events
$ (document). Ready ()
The document is ready to execute after the document is fully loaded.
Click ()
The user clicks an HTML element and then invokes it, such as the following example, where the user clicks the <p> tag section to hide the tag's contents:
$ ("P"). Click (function () {
$ (this). Hide ();
});
DblClick ()
Called when you double-click an HTML tag, such as the following code hides its contents when double-clicking the <p> element:
$ ("P"). DblClick (function () {
$ (this). Hide ();
});
MouseEnter ()
triggered when the mouse enters an HTML element, for example:
$ ("#p1"). MouseEnter (function () {
alert ("you entered p1!");
});
MouseLeave ()
triggered when the mouse enters the exit of an HTML element, for example:
$ ("#p1"). MouseLeave (function () {
alert ("bye! You are now leave p1! ");
MouseDown ()
Triggered when the left mouse button is pressed, for example:
$ ("#p1"). MouseDown
(function () {
alert ("Mouse down over p1!");
MouseUp ()
Triggers when the left mouse button is released on an element, for example:
$ ("#p1"). MouseUp (function () {
alert ("Mouse up over p1!");
Hover ()
triggered when the mouse pointer is over an element, a combination of MouseEnter and MouseLeave, which is called when the mouse enters in its first callback function, and the second callback function executes when the mouse leaves, for example:
$ ("#p1"). Hover (function () {
alert ("you entered p1!");
},
function () {
alert ("bye! You are now leave p1! ");
Focus ()
Called when a form input field receives the focus, for example:
$ ("input"). Focus
(function () {
$ (this). CSS ("Background-color", "#cccccc");
});
Blur ()
Called when a form input field loses focus, for example:
$ ("input"). Blur
(function () {
$ (this). CSS ("Background-color", "#ffffff");
});