Chapter 9 JavaScript Event Learning: mouse events

Mouse events are the most important events so far. In this chapter, I will introduce some of the most common problems and tips for 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:

Element. onmousemove = doSomething;

2 // later

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

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page