Getting Started with jquery (4) Events

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");     
});