JavaScript Event Learning Chapter 9 Mouse Events_javascript skills

Let’s first take a look at what mouse events there are: mousedown, mouseup_and_click, dblclick, mousemove and mouseover mouseout. Then we will also explain the event attributes relatedTarget, fromElement and toElement. Finally, there are Microsoft's mouseenter and mouseleave events.

Browser compatibility issues can be viewed in the Browser Compatibility List.

Example
Here is an example. It can help to understand the following content.
mousedown, mouseup, click and dblclick are registered at this link. You can view it in the text box below. Or in a dialog box. (Please try in the original text: http://www.quirksmode.org/js/events_mouse.htm)
Mousedown,mouseup,click
If the user clicks on an element, then at least three events will be triggered, and the order is as follows:
1. mousedown, when the user presses the mouse button on this element
2. mouseup, When the user releases the mouse button on this element
3. click, occurs when both a mousedown and a mouseup are detected on this element
Usually mousedown and mouseup are more useful than click. Some browsers do not allow you to read onclick event information. And sometimes the click event does not keep up when the user makes certain actions with the mouse.
Suppose the user presses the mouse button on a link, then moves the mouse button away and releases the mouse button after moving away. Then this link only has a mousedown event. Similarly, if the user moves to the link after clicking the mouse, then the link will only mouseup. In both cases no click event occurs.
Whether this is a problem depends on user behavior. But you should register the onmousedown/up event unless you absolutely want the click to happen.
If you use a pop-up alert box, the browser may lose the track of the event and how many times it occurred, which will cause confusion. So it's better not to use that.
Dblclick
dblclick event is rarely used. If you want to use it, be sure not to register the onclick and dblclick event handlers on an HTML element. If both are registered, it is basically impossible for you to know what the user is doing.
In short, when the user double-clicks on an element, the click event always occurs before dblclick. In addition, in Netscape, the second click is always processed separately before the dblclick. Regardless, the warning box is very dangerous.
So ensuring that your click and dblclick are well separated can avoid many complications.
Mousemove
The mousemove event works well, but be aware that it may require a lot of system resources to handle all mousemove events. When the user moves the mouse one pixel, mousemove is triggered once. Even if nothing happens, long and complex functions that take a long time will affect the efficiency of the website: everything will slow down, especially on older machines.
So the best way is to register the onmousemove event when you need it, and remove it as soon as possible when not in use:

Copy code The code is as follows:

element.onmousemove = doSomething;
// later
element.onmousemove = null;

Mouseover and mouseout
Look at this example again, change to mouseover and try it. This example just adds an event handler for onmouseover on ev3. However, you will notice that the event is not only triggered on ev3 but also on ev4 or span. Before Mozilla 1.3, this was triggered whenever the mouse entered a text area.
The reason is of course event bubbling. User triggered mouseover event on ev4. There is no onmouseover event handler on this element, but there is on ev3. So when the event bubbles up to ev3, the program is executed.
Although these settings are completely correct, there is still a problem. The first issue is the goal. Assume 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 where the event occurred, because the mouse moved to it. But when the following happens:
---------------------------------------- -
| This is div id="ev3" |
| -------------------------------- |
| | This is div id="ev4" | |
| | -------- | |
| | | span | | |
| | | ------ --> | |
| | -------- | |
| -------------------------- ---- |
-----------------------------------------
-------->: mouse movement
The target/srcElement of this event is the same. Here, the mouse still enters ev4. However you may do different things when the mouse comes from ev3 or from SPAN. So we need to know where the mouse comes from.
relatedTarget, fromElement, toElement
W3C added the relatedTarget attribute to the mouseover and mouseout events. In the mouseover event, it includes where the mouse comes from, and in the mouseout event, it includes where the mouse goes.
Microsoft also has two attributes that contain the following information:
1. fromElement refers to the element before the mouse comes. It is more useful in the case of mouseover
2. toElement indicates the element that the mouse will go to. More useful in mouseout situations.
In our first example, relatedTarget/fromElement contains a reference to ev3, in our second example it is SPAN. Now you know where the mouse comes from.
Cross-browser code
So if you want to know where the mouse is coming from in case of mouseover then:

Copy code The code is as follows:

function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e .fromElement;
}

If you want to know where the mouse is going in case of mouseout then:

Copy code The code is as follows:

function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e .toElement;
}

Mouse leaves a layer
In a layer-based navigation menu you may need to know when the mouse leaves a layer so that you can close that layer. So you register an event handler for this layer's onmouseout. Then the event bubbling will cause the onmouseout to be triggered 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 when you move the mouse into this layer and then reaches a link, the browser registers a mouseout event on this layer. This baffles me (the mouse is still in the layer), but all browsers have no problem.
So how do we make mouseout happen when the mouse actually leaves the layer?

Copy code The code is as follows:

function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
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, which is the element the mouse left. If the target is not a DIV (layer), understand the end function because the mouse does not really leave the layer.
If the target is a layer, we cannot determine whether the mouse left the layer or entered a link in the layer. So you need to check the relatedTarget/toElement of the event again, which is the element to which the mouse is moved.
We read this element, and then we traverse upward through the DOM tree until the target of the event (that is, DIV), or the BODY element.
If the target we encounter is a child element of the layer, then the mouse has not left the layer. Just stop the function from running.
When the function passes all verifications we can be sure that the mouse has indeed left the layer, and we can start the appropriate action (usually hiding the layer).

Mouseenter and mouseleave
Microsoft has a solution. He added two new events mouseenter and mouseleave. It is basically the same as mouseover and mouseout except that it does not react to event bubbling. They treat the elements registered for the event as a whole block and do not react to
mouseover and mouseout that occur within the block.
So these two events also solve our problem: they only respond to mouseover/out on bound elements.
Now these two events are only supported by IE version 5.5 or above. Maybe other browsers will learn from this one day.
End
Now we have reached the end of the introduction of Event. good luck!
Original address: http://www.quirksmode.org/js/events_mouse.html
My Twitter: @rehawk