jquery Events--mouse events

One, click () and DblClick ()--double-click

• The Click event is actually made up of 2 actions by MouseDown and MouseUp, so the clicked action is only triggered when you let go.
• It is not advisable to bind both the click and the DblClick events on the same element.

$ (". Div"). Click (function () {    alert ("Hello")})

$ (' P '). Click (function (e) {
alert (e.target.textcontent); Print the text of the clicked object
})

Function ABC (e) {
Alert (e.data)//1111
}　

$ ("Button:eq (2)"). Click (1111, ABC); Click the button to call the data method

3 ways to//click events //1$ ("#box"). Click (function () {         alert ("Hello");    //2$ (' #box '). Bind ("click", Function () {       alert ("Hello");  //3$ (' #box '). On (' click ', Function () {       alert ("Hello");  

Ii. MouseDown () and MouseUp ()

• MouseDown emphasis is on the trigger
• MouseDown events can be triggered when any mouse button is pressed
• Use the event object's which to distinguish the key, hit the left mouse button which value is 1, hit the mouse key which value is 2, the right mouse button to which the value is 3

Click the button, which button is pressed, the left button is 1, the middle wheel is 2, the right button is 3$ ("Button:eq (0)"). MouseDown (function (e) {      alert (' E.which: ' + E.which}}) function fn (e) {    alert (e.data)//1111} function A () {    $ ("Button:eq (2)"). MouseDown (1111, FN)} a ();

Third, MouseMove () mouse movement

• The MouseMove event is triggered when the mouse pointer moves, even if it is a pixel
• If the processor does any significant processing, or if there are multiple handler functions for the event, this can cause serious browser performance problems

<class= "Aaron1">    <p> Mouse moves in green area trigger MouseMove</p>    <p> Moving x Position:</p></div>$ (". Aaron1 "). MouseMove (function (e) {  $ (this). Find (' P:last '). HTML (' Mobile x Position: ' + E.pagex)})

Iv. mouseover () and Mouseout ()

Move in to move out event

<Divclass= "Aaron1">    <P>Mouse moves into this area to trigger mouseover events</P>    <a>Enter the inside of the element, mouseover the number of event firings:</a></Div>var n = 0;//Binds a mouseover event $ (". Aaron1 p:first"). MouseOver (function (e) {$ (". Aaron1 a"). html (' Enter element inside, MouseOver event Trigger Number of times: ' + (++n)})

V. MouseEnter () and MouseLeave ()

Similar to MouseOver ()/mouseout ()

The difference between MouseEnter events and MouseOver

The key point is: The bubbling way to deal with the problem

A simple example:

MouseOver For example:

<div class= "Aaron2" >    <p> mouse out of this area to trigger MouseLeave events </p></div>

If the P element and the DIV element are bound to the MouseOver event, the mouse leaves the P element, but does not leave the DIV element when the result is triggered:

1. P Element Response Event
2. div element Response Event

The question here is why does Div get triggered? The reason is the event bubbling problem, p element triggered mouseover, he will always look up on the parent element of the MouseOver event, if the parent element has MouseOver event will be triggered

So under this scenario, jquery recommends that we use the MouseEnter event

The MouseEnter event is called only on the element that binds it, not on the descendant node.

<style>p{height:50px;border:1px solid red;margin:30px;} </style>

<Divclass= "Aaron1">    <P>The mouse leaves this area to trigger the MouseOver event</P>    <a>Number of MouseOver event firings:</a><BR/>    <a>MouseOver Bubbling event Firings:</a></Div><Divclass= "Aaron2">    <P>Mouse enters this area to trigger MouseEnter event</P>    <a>Number of MouseEnter event firings:</a><BR/>    <a>MouseEnter Bubbling event Firings:</a></Div>var i = 0;   $ (". Aaron1 p"). MouseOver (function (e) {$ (". Aaron1 a:first"). HTML (' MouseOver Event Trigger: ' + (++i)}}) var n = 0; $ (". Aaron1"). MouseOver (function () {$ (". Aaron1 a:last"). html (' MouseOver bubbling Event Trigger: ' + (++n)})
<Scripttype= "Text/javascript">   varI= 0; $(". Aaron2 P"). MouseEnter (function(e) {$ (". Aaron2 A:first"). HTML ('number of MouseEnter event firings:' + (++i))})varN= 0; $(". Aaron2"). MouseEnter (function() {       $(". Aaron2 A:last"). HTML ('MouseEnter Bubbling event firings:' + (++n))})</Script>

Vi. Hover () event

Move the element on the move out to toggle its color change, generally through 2 event mates can be achieved, here with MouseEnter and MouseLeave, so as to avoid bubbling problem

$ (ele). MouseEnter (function () {     $ (this). CSS ("Background", ' #bbffaa ');}) $ (ele). MouseLeave (function () {    $ (this). CSS ("Background", ' Red ');})

Directly with a hover method, you can easily handle
$ ("P"). Hover (function () {
$ (this). CSS ();
})

Vii. Focusin () and Focusout ()

When an element, or any element within it, gets the focus,

For example: INPUT element, when the user clicks on the focus, if the developer needs to capture this action, jquery provides a focusin event <input type= "text" />

$ ("Input:first"). Focusin (function () {      $ (this). CSS (' border ', ' 2px solid red ');  Input gets focus, border turns red })

$ ("Input:first"). Focusout (function () {
$ (this). CSS (' border ', ' 2px solid blue '); //Lose Focus,
})

Different functions pass data
function fn (e) {
$ (this). Val (E.data)
}

function A () {
$ ("Input:last"). Focusin (' Please enter your name ', FN)
}
A ();

Focus Blur events in form events

jquery Events--mouse events