In-depth learning of jquery mouse events

Previous words

Mouse events are the most common events in DOM events, and jquery encapsulates and expands mouse events. This article describes the jquery mouse events in detail

Type

Mouse Events Total 10 categories, including Click, ContextMenu, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, Mouseout, MouseEnter, and MouseLeave

Click         to trigger an event that ContextMenu can cancel when the user presses and releases the mouse button or otherwise activates the element   , triggering when the context menu is about to appear. The current browser displays the context menu when the mouse is right-clicked DblClick when the user      double-clicks the mouse trigger MouseDown     When the user presses the mouse button MouseUp triggers when the       user releases the mouse button MouseMove     Trigger when the user moves the mouse mouseover     when the mouse enters the element mouseout      when the mouse leaves the element mouseenter    like mouseover, but does not bubble MouseLeave    Similar to mouseout, but not bubbling

Writing

The above 10 kinds of mouse events, all have corresponding wording. The following is an example of the Click () event to illustrate the wording of a mouse event

"1" Click (Handler (EventObject))

The Click () event is a shorthand for the bind () event and can accept an event handler as a parameter

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). Click (function () {    $ ( This). CSS (' background ', ' LightBlue ')}) </script>

"2" Click ([Eventdata],handler (EventObject))

The Click () event can accept two parameters, the first parameter passes the data, and the second argument is the handler function

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). Click (123,function (Event) {    alert (event.data);}) </script>    

"3" click ()

The click () event becomes the Click () method, which is a shorthand for the trigger (' click ') when no arguments are taken.

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><button id= "BTN1" > Button one </button><button id= "btn2" > button two </button><script>$ (' #btn1 '). On (' click ', function () {    alert (1);}); $ (' #btn2 '). On (' click ', Function () {   $ (' #btn1 '). Click ();}); </script>

Synthetic events

The jquery event expands on mouse events, customizing two composition Events--hover () and toggle ()

[Note the]toggle () event has been removed in the jQuery1.8 version

Hover ()

The hover (Enter,leave) event is used to simulate a cursor hover event. The first function parameter is triggered when the mouse is moved, and the second function parameter is triggered when the mouse moves out.

The hover () event is actually a collection of MouseEnter events and MouseLeave events

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). On (' MouseEnter ', function ( Event) {    $ (this). CSS (' Background-color ', ' lightblue ');}) $ (' #box '). On (' MouseLeave ', function (event) {    $ (this). CSS (' background-color ', ' Transparent ');}) </script>

Use the hover () event to implement the following

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). Hover (function () {    $ ( This). CSS (' Background-color ', ' lightblue ');},function () {    $ (this). CSS (' background-color ', ' Transparent ');}) </script>

When the hover () event has only one parameter, the parameter is a function common to the MouseEnter and MouseLeave events

<style>.active{background-color:lightblue;} </style><script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= " Box "style=" height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). Hover (function () {    $ (this). Toggleclass (' active ')}) </script>

Toggle () [deleted]

The toggle () event is used to simulate a mouse continuous click event. 1th Click, trigger 1th function parameter, 2nd click, trigger 2nd function function, if there are more functions, then trigger until the last one. Each subsequent click repeats the call to these functions.

Mouse buttons

Event object which property is used to distinguish which key is pressed, the value of the left mouse button which is 1, the value of hitting the middle mouse button which is 2, the value of the right mouse button which is 3

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). MouseDown (function (event) {    alert (Event.which)}) </script>

modifier keys

The state of some keys on the keyboard can affect the action you want to take when you press the mouse, which is the shift, Ctrl, ALT, and meta (the Windows key in the Windows keyboard, the CMD key in the Mac), which are often used to modify the behavior of mouse events

The jquery reference DOM specifies 4 properties that represent the state of these modifier keys: Shiftkey, Ctrlkey, Altkey, and Metakey. These properties contain Boolean values that are true if the corresponding key is pressed, otherwise the value is False

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$" (' #box '). Click (Function (event) {    $ (' #box '). html ();    if (Event.shiftkey) {$ (' #box '). html (' Shiftkey; ')}    if (Event.ctrlkey) {$ (' #box '). html (' Ctrlkey; ')}    if (Event.altkey) {$ (' #box '). html (' Altkey; ')}    if (Event.metakey) {$ (' #box '). html (' Metakey; ')}}) </script>

Coordinate position

With respect to the coordinate location, the DOM event object provides 6 pairs of information, clientx/y, pagex/y, screenx/y, x/y, offsetx/y, layerx/y, but the browser implementations vary greatly.

jquery provides four clientx/y, offsetx/y, screenx/y, pagex/y information about coordinate locations

clientx/y

Clientx/y represents the horizontal and vertical coordinates of the mouse pointer in the viewable area

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:200px;border:1px solid Black "></div><script>$ (' #box '). MouseMove (function (event) {    $ (' #box '). HTML (function (index,oldhtml) {        return ' ClientX: ' + Event.clientx + '; ClientY: ' +event.clienty    });}) </script>

offsetx/y

Offsetx/y represents the horizontal and vertical coordinates relative to the anchor parent

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:400px;border:1px solid Black "></div><script>$ (' #box '). MouseMove (function (event) {    $ (' #box '). HTML (function (index,oldhtml) {        return ' ClientX: ' + Event.clientx + '; ClientY: ' +event.clienty + ' OffsetX: ' + Event.offsetx + '; OffsetY: ' +event.offsety    });}) </script>

screenx/y

Screenx/y represents the horizontal and vertical coordinates of the mouse pointer relative to the screen

<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= " height:30px;width:400px;border:1px solid Black "></div><script>$ (' #box '). MouseMove (function (event) {    $ (' #box '). HTML (function (index,oldhtml) {        return ' ClientX: ' + Event.clientx + '; ClientY: ' +event.clienty + ' ScreenX: ' + Event.screenx + '; ScreenY: ' +event.screeny    });}) </script>

pagex/y

Pagex/y represents the horizontal and vertical coordinates relative to the page, and the difference between it and the Clientx/clienty is not changed with the position of the scrollbar

<body style= "height:2000px;" ><script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script><div id= "box" style= "Height:100px;width:300px;background:pink;" ></div><div id= "Result" ></div><script>$ (' #box '). MouseMove (function (event) {    $ (' # Result '). html (function (index,oldhtml) {        return ' ClientX: ' + Event.clientx + '; ClientY: ' +event.clienty + ' PageX: ' + Event.pagex + ';p agey: ' +event.pagey    

In-depth learning of jquery mouse events