Getting Started with jquery (4) Events

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.