Mouse events (jQuery)

The Click and Dbclick events of the 1jQuery mouse event

In the interactive operation, the simplest and most straightforward operation is the click action. jquery provides two methods one is the click Method for listening for user clicks, and the other is the Dbclick method used to listen for user double-click operations. The use of these two methods is similar, as in the Click () event, for example

It's very easy to use:

Method One: $ele. Click ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). Click (function () {    alert (' Trigger specified event ')}) $ ("#test"). Click (Function () {     $ ("Ele"). Click ()  //Manually specify the trigger event});

Method Two: $ele. Click (Handler (EventObject))

Binding the $ele element, each time the $ele element triggers a click action executes the callback handler function, which can do a lot of action on the feedback of the event, which is the element that points to the bound event

<div id= "Test" > Click Trigger <div>$ ("#test"). Click (function () {    //this points to div element});

Method Three: $ele. Click ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). Click (11111,function (E) {    //this points to div element    //e.date  = > 11111 Pass Data});

The usage of DblClick () is similar to the use of Click (), which can be referenced by the use of click () above.

The Dbclick differs from the Click event:

The Click event trigger requires the following points:

• 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.

PS:MouseDown and MouseUp the next section will talk about

DblClick The following points are required for event triggering:

DblClick is also superimposed by 2 Click, so the DblClick event can only be triggered if the following conditions are met

• Click when the mouse pointer is inside the element.
• The mouse pointer is released inside the element.
• The mouse pointer inside the element when the click, click the interval time, is system-determined.
• When the mouse pointer is inside the element, it is released again.

Note: It is not advisable to bind both the click and DblClick events on the same element. The order in which each browser event is triggered is different, and some browsers accept two click events before DblClick, while some browsers accept only one click event. Users can often configure double-click sensitivity via different operating systems and browsers

MouseDown and MouseUp events of 2jQuery mouse events

User interaction operation, the simplest direct operation is the click operation, so jquery provides a mousedown quick way to listen to the user mouse down the action, and its corresponding to a method MouseUp Quick Method can listen to the user mouse bounce action. two ways to use similar , the following with MouseDown () as an example

It's very easy to use:

method One: $ele. MouseDown()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered and may be less commonly used

<div id= "Test" > Click Trigger <div>$ ("Ele"). MouseDown (function () {    alert (' Trigger specified event ')}) $ ("#test"). MouseDown ( function () {     $ ("Ele"). MouseDown ()  ///Manually specify trigger event});

Method Two: $ele. MouseDown (Handler (EventObject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseDown (function () {    //this points to div element});

Method Three: $ele. MouseDown ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseDown (11111,function (e) {    //this points to div element    //e.date  = 11111 Pass Data});

The following points are required for MouseDown event triggering:

• MouseDown emphasis is on the trigger
• If you hold down the mouse on an element and drag the mouse away from the element and release the mouse button, this is still counted as the MouseDown event
• 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

MouseUp The following points are required for event triggering:

• MouseUp stress is to let go of the trigger, and MouseDown is the opposite
• MouseUp and MouseDown together are the Click event
• If the user presses the mouse button on an element and drags the mouse away from the element, then releases the mouse button, which is still counted as the MouseUp event
• Any mouse button can trigger the MouseUp event when it's off
• 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

It is also important to note that:

Click with the MouseDown The difference:

• The Click event is actually made up of 2 actions by MouseDown in MouseUp, so the clicked action is only triggered after letting go.

MouseMove events for 3jQuery mouse events

In an interactive operation, it is often necessary to know whether the user has a moving operation. The movement-based mechanism allows you to drag, drag and drop a series of effects. For mobile events, jquery provides a quick and mousemove way to listen to the actions the user moves

It's very easy to use:

Method One: $ele. MouseMove ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). MouseMove (function () {    alert (' Trigger specified event ')}) $ ("#test"). Click ( function () {     $ ("Ele"). MouseMove ()  //Specify trigger event});

Method Two: $ele. MouseMove (Handler (EventObject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Slide trigger <div>$ ("#test"). MouseMove (function () {    //this points to div element});

Method Three: $ele. MouseMove ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseMove (11111,function (e) {    //this points to div element    //e.date  = 11111 Pass Data});

The following points are required for MouseMove event triggering:

• 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

MouseOver and Mouseout events of 4jQuery mouse events

When learning JS, you remember there are two ways to call the move out event? onMouseOver () and onmouseout () events ~

jquery also provides such an event to listen to the user's move-out operations, MouseOver () and mouseout () events, the use of both similar, the following mouseover as an example:

Method One: $ele. MouseOver ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). MouseOver (function () {    alert (' Trigger specified event ')}) $ ("#test"). Click ( function () {     $ ("Ele"). MouseOver ()  //Specify trigger event});

Method Two: $ele. MouseOver (Handler (EventObject))

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Slide trigger <div>$ ("#test"). MouseOver (function () {    //this points to div element});

Method Three: $ele. mouseover ([EventData], Handler (EventObject))

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). MouseOver (11111,function (e) {    //this points to div element    //e.date  = 11111 Pass Data});

MouseEnter and MouseLeave events of 5jQuery mouse events

In an interactive operation, it is often necessary to know whether the user has moved the mouse to the inside or outside of the element, so jquery provides a quick way to MouseEnter and MouseLeave to listen to the actions of the user moving to the inside

It is very simple to use, three parameters are passed in the same way as the mouseover and mouseout, so there is no repetition here, mainly speaking of differences, the following mouseenter as an example:

MouseEnter JavaScript events are proprietary to Internet Explorer. Since this event is useful in peacetime, jquery simulates this event so that it can be used in all browsers. The event is triggered when the mouse is moved over the element. Any HTML element can accept this event.

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.

This is the most essential difference.

Hover events for 6jQuery mouse events

Learn the MouseOver, mouseout, MouseEnter, MouseLeave events, also understand the four events of the same point and different points, now can be used to make a simple switch effect of the element

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

This goal is achieved, the code a little bit more, for such a simple logic jquery directly provides a hover method that can be easily handled

You only need to pass 2 callback functions in the hover method, you do not need to show the binding 2 events

$ (selector). Hover (Handlerin, handlerout)

• Handlerin (EventObject): event function that triggers execution when the mouse pointer enters an element
• Handlerout (EventObject): event function that triggers execution when the mouse pointer leaves an element

Focusin events for 7jQuery mouse events

When an element, or any element within it, receives the focus, for example, the input element, when the user clicks on the focus, jquery provides a Focusin event when the developer needs to capture the action.

It's very easy to use:

Method One: $ele. Focusin ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered, typically with less

<div id= "Test" > Click Trigger <div>$ ("Ele"). Focusin (function () {    alert (' Trigger specified event ')}) $ ("#test"). MouseUp ( function () {     $ ("Ele"). Focusin ()  //Specify trigger event});

Method Two: $ele. Focusin (Handler)

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusin (function () {    //this points to div element});

Method Three: $ele. Focusin ([EventData], handler)

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusin (11111,function (e) {    //this points to div element    //e.date  = > 11111 Pass Data});

Focusout events for 8jQuery mouse events

When an element, or any element within it, loses focus, such as the input element, when the user clicks the lost point, and if the developer needs to capture the action, jquery provides a focusout event

It's very easy to use:

Method One: $ele. Focusout ()

Binding the $ele element, without any parameters, is typically used to specify that an event is triggered and may be less commonly used

<div id= "Test" > Click Trigger <div>$ ("Ele"). Focusout (function () {    alert (' Trigger specified event ')}) $ ("#test"). MouseUp ( function () {     $ ("Ele"). Focusout ()  //Specify trigger event});

Method Two: $ele. Focusout (Handler)

Binds the $ele element, which executes the callback handler function each time the $ele element triggers a click operation

This allows for a lot of action on the feedback of the event.

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusout (function () {    //this points to div element});

Method Three: $ele. Focusout ([EventData], handler)

Used in accordance with method two, but can accept a data parameter, such processing is to solve the problem of data transfer under different scopes

<div id= "Test" > Click Trigger <div>$ ("#test"). Focusout (11111,function (e) {    //this points to div element    //e.date  = > 11111 Pass Data});

Blur of 9jQuery form events and focus events

In the previous sections 2.8 and 2.9 we learned the form handling event Focusin event with the Focusout event, as well as the event that handles the form focus and the blur and focus events

The essential difference between them:

Whether to support bubbling processing

To give a simple example

<div>  <input type= "text"/></div>

Where the INPUT element can trigger the focus () event

The div is the parent element of input, and it generates the Focusin () event when it contains an element input that triggers the focus event.

Focus () is produced in the element itself, and Focusin () is generated in the element containing the element

Blur and Focusout are also so

Mouse events (jQuery)