JavaScript Event Learning Chapter 10 Some Replaceable Event Pairs_Javascript Skills

Limitations of testing
In this chapter we plan to find out which events can be used to simulate mouse events. Note that this series of tests does not include screen readers. The test also had limitations because I couldn't meet all the criteria. This test targets only users who do not use a mouse in a graphical browser.
I assume these tests can also be used on some mobile devices. Because the conditions are insufficient, it cannot be tested. Many times the performance on mobile devices is always unsatisfactory.
Summary
Unfortunately, we cannot make a strict one-to-one solution for mouse events and non-mouse events, because there are many differences between non-mouse events and mouse events. So the advice below applies in most situations, but not all.
The following are my test results:
1. mouseover:focus
2. mouseout:blur
3. click: no matching required
4. dblclick: don’t know
5. mousedown:keydown (the least bad choice)
6. mouseup:keyup (the least bad choice)
7. mousemove: impossible without a mouse

If the page must require perfect support Mouse users, then we have very few elements to choose from that can apply event handlers. It's actually a throwback to the days of Netscape 3, when event handlers were only useful in links and forms.
More research is still necessary.
Preparation
In most browsers users can tab through the entire page. When they do this, focus jumps to the next link or form. This works in both IE and Mozilla. In Safari you need to press F1 to activate the keyboard shortcut.
Opera users are from another system. Jumping on a link requires pressing the Ctrl arrow key. Even though it's a different combination, I'd still call it "Tabbing."
Example: traditional mouseover
How to do it? First and most important, add two events for mouseover and mouseout:

Copy the code The code is as follows:

imgs[i].onmouseover = imgs[i].onfocus = mouseGoesOver;
imgs[i].onmouseout = imgs[i].onblur = mouseGoesOut;

Now when the user mouse passes or tab passes, the function will be executed.
However, adding a few events is not enough. My original studio sets onmouseover and mouseout directly on the image. Unfortunately tabbing an image is almost impossible: tabbing is only useful for links and forms. So I need to add the event on the parent node of the image: link.
This simple example will not change due to our re-registration, but more complex scripts may not be able to define access activities to, for example, a div.
To ensure perfect usability, we can just define events for links and forms, just like we did back in 1998. Although most events on the Internet are still defined on links, a complex script such as text editing is not available to non-mouse users because we have to click on it.

Translation address: http://www.quirksmode.org/js/events_pairs.html

Author: Beiyu (tw:@rehawk)
Article source: beiyu.cnblogs.com