jquery Mouse Events Summary

Mouse events are events that trigger when a user moves the mouse cursor or clicks on any mouse button, and jquery encapsulates essentially all mouse events including click, double-click, move, and other mouse events, and we'll look at the syntax and usage of these events.

Mouse events are triggered when the user moves the mouse cursor or clicks with any mouse button.

1. Click event : Triggered when the left mouse button is clicked

$ (' P '). Click (function () {});

Example:

$ (' P '). Click (function () {        alert (' Click function is running! ');       });

2. Dbclick event : Triggered by a fast and continuous two clicks

$ (' P '). Dbclick (function () {});

Example:

$ ("button"). DblClick (function () {$ ("P"). Slidetoggle ();});

3. MouseDown event : Triggered when the mouse is pressed

$ (' P '). MouseDown (function () {});

Example

$ ("button"). MouseDown (function () {$ ("P"). Slidetoggle ();});

4. MouseUp event : Triggers when the mouse is released

$ (' P '). MouseUp (function () {});

Example:

$ ("button"). MouseUp (function () {$ ("P"). Slidetoggle ();});

5. MouseOver event : Triggers when the mouse moves from one element to another

　　mouseout Event : Triggered when the mouse moves out of an element

$ (' P '). MouseOver (function () {});

$ (' P '). Mouseout (function () {});

Example:

$ ("P"). MouseOver (function () {$ ("P"). CSS ("Background-color", "Yellow");}); $ ("P"). Mouseout (function () {$ ("P"). CSS ("Background-color", "#E9E9E4");});

6. MouseEnter Event : triggered when mouse moves into element

MouseLeave Event : Triggered when the mouse moves out of an element

$ (' P '). MouseEnter (function () {});

$ (' P '). MouseLeave (function () {});

Example

$ ("P"). MouseEnter (function () {$ ("P"). CSS ("Background-color", "Yellow");}); $ ("P"). MouseLeave (function () {$ ("P"). CSS ("Background-color", "#E9E9E4");});

7. Hover Events

$ (' P '). Hover (
function () {},
function () {}
);

Example

8. Toggle Event : Mouse click to toggle Event

$ (' P '). Toggle (
function () {},
function () {}
);

Example

$ ("P"). Toggle (function () {$ ("body"). CSS ("Background-color", "green");}, function () {$ ("body"). CSS (" Background-color "," Red ");}, function () {$ (" body "). CSS (" Background-color "," Yellow ");});

JQuery Mouse Event Summary