JavaScript Event Learning Chapter 9 mouse events

First, let's take a look at the mouse events: mousedown, mouseup_and_click, dblclick, mousemove, and mouseover mouseout. Then, we will explain the event attributes such as relatedTarget, fromElement, and toElement. The last is Microsoft's mouseenter and mouseleave events.

For browser compatibility issues, see the browser compatibility list.

Example
Here is an example. This helps you understand the following content.
Mousedown, mouseup, click, and dblclick are registered on this link. You can view it in the text box below. Or in the dialog box. (Try: http://www.quirksmode.org/js/events_mouse.htm in the original article)
Mousedown, mouseup, click
If you click on an element, at least three events will be triggered. The order is as follows:
1. mousedown: When you press the mouse key on this element
2. mouseup: when you release the mouse key on this element
3. click. When both a mousedown and a mouseup are detected on this element
Generally, mousedown and mouseup are more useful than click. Some browsers do not allow you to read onclick event information. In addition, sometimes users use the mouse to make certain actions. click events do not keep up.
Assume that you press the mouse key on a link, move the mouse away, and then release the mouse key. At this time, this link only has a mousedown event. Similarly, when a user clicks the mouse and moves it to the link, only mouseup occurs for the link. No click event occurs in both cases.
Whether this is a problem depends on user behavior. However, you should register the onmousedown/up event, unless you just want to click it.
If you use a pop-up warning box, the browser may lose the track of the event and the number of times it happened, causing confusion. So it's best not to use that.
Dblclick
Dblclick events are rarely used. If you want to use it, do not register the onclick and dblclick Event Handlers on an HTML element. If both are registered, you need to know what the user is doing, which is basically impossible.
In short, when you double-click an element, the click event always occurs before dblclick. In addition, in Netscape, the second click is always processed separately before dblclick. In any case, the warning box is dangerous.
Therefore, ensure that the separation of click and dblclick can avoid many complicated tasks.
Mousemove
The mousemove event runs well, but note that many system resources are required to handle all the mousemove events. When you move the mouse to a pixel, mousemove is triggered once. Even if nothing happens, long and complex functions will take a long time to affect the efficiency of the Website: All things will slow down, especially on old antiques.
So the best way is to register the onmousemove event when you need it and remove it as soon as you don't need it:
Copy codeThe Code is as follows: element. onmousemove = doSomething;
// Later
Element. onmousemove = null;

Mouseover and mouseout
Let's take a look at this example. Replace it with mouserover and try again. In this example, the onmouseover event handler is added to ev3. However, you will notice that not only ev3 will trigger the event on ev4 or span. Before Mozilla 1.3, It is triggered when the mouse enters a text area.
The reason is event bubbling. The user triggers the mouseover event on ev4. There is no onmouseover event handler on this element, but there is one on ev3. So when the event is bubbling to ev3, the program is executed.
Although these settings are all correct, there is still a problem. The primary issue is the goal. Assume that the mouse enters ev4:
-----------------------------------------
| This is div id = "ev3" |
| ----------------------------- |
| This is div id = "ev4" |
| -------- <-------- |
| Span |

| -------- |
| ----------------------------- |
-----------------------------------------
<--------: Mouse movement
Now the target/srcElement of this event is ev4: it is the element of the event, because the mouse moves to it. But the current occurrence:
-----------------------------------------
| This is div id = "ev3" |
| ----------------------------- |
| This is div id = "ev4" |
| -------- |
| Span |
| --------> |
| -------- |
| ----------------------------- |
-----------------------------------------
-------->: Mouse movement
The target/srcElement of this event is the same. Move the mouse to ev4. However, you may do different things when you move the mouse from ev3 or SPAN. So we need to know where the mouse comes from.
RelatedTarget, fromElement, toElement
W3C adds the relatedTarget attribute to the mouseover and mouseout events. Under the mouseover event is where the mouse comes from, and under the mouseout event is where the mouse goes.
Microsoft also has two attributes that contain the following information:
1. fromElement refers to the elements before the mouse comes. It is useful in the case of mouseover.
2. toElement indicates the element to be removed by the mouse. It is useful when mouseout is used.
In our first example, relatedTarget/fromElement contains an ev3 reference. In our second example, It is SPAN. Now you know the source of the mouse.
Cross-browser code
So if you want to know where the mouse comes from with mouseover, then:
Copy codeThe Code is as follows:
Function doSomething (e ){
If (! E) var e = window. event;
Var relTarg = e. relatedTarget | e. fromElement;
}

If you want to know the direction of the mouse in the case of mouseout:
Copy codeThe Code is as follows:
Function doSomething (e ){
If (! E) var e = window. event;
Var relTarg = e. relatedTarget | e. toElement;
}

Move the mouse away from a Layer
In a layer-based navigation menu, you may need to know when the mouse leaves the layer so that you can close that layer. Therefore, you have registered an event handler for onmouseout on this layer. Event bubbles will trigger this onmouseout when the mouse leaves any layer.
--------------
| Layer |. onmouseout = doSomething;
| -------- |
| Link | ----> We want to know about this mouseout

| -------- |
| -------- |
| Link |
| ----> | But not about this one
| -------- |
--------------
---->: Mouse movement
Another way to stop is to register a mouseout event on this layer when you move the mouse to this layer and then to a link. This makes me very confused (the mouse is still in the layer), but all browsers are fine.
So how can we make mouseout happen when the mouse really leaves the layer?
Copy codeThe Code is as follows: function doSomething (e ){
If (! E) var e = window. event;
Var tg = (window. event )? E. srcElement: e.tar get;
If (tg. nodeName! = 'Div ') return;
Var reltg = (e. relatedTarget )? E. relatedTarget: e. toElement;
While (reltg! = Tg & reltg. nodeName! = 'Body ')
Reltg = reltg. parentNode
If (reltg = tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}

First, get the target of the event, that is, the elements that move the mouse away. If the target is not a DIV (layer), understand the end function because the mouse does not actually exit the layer.
If the target is a layer, we cannot determine whether the mouse leaves the layer or enters a link in the layer. Check the relatedTarget/toElement of the event again, that is, the element to which the mouse moves.
We read this element, and then we traverse it up through the DOM tree until the target (that is, DIV) or BODY element of the event.
If the target we encounter is a child element of the layer, the mouse does not leave the layer. Stop the function.
When the function passes all the verification, we can determine that the mouse does leave the layer, and we can start the action (usually to hide this layer ).

Mouseenter and mouseleave
Microsoft has another solution. He added two new events: mouseenter and mouseleave. In addition to not responding to event bubbles, it is basically the same as mouseover and mouseout. They regard the elements registered with the event as a whole block.
Mouseover and mouseout do not respond.
These two events solve our problem: they only make mouseover/out responses to the bound elements.
Currently, these two events are only supported by IE of Version 5.5 or later. Maybe other browsers can learn from you one day.
End
Now the introduction of Event is coming to an end. Good luck!
Address: http://www.quirksmode.org/js/events_mouse.html
My Twitter: @ rehawk