JavaScript Event Learning Chapter 7 Event Attributes

When we want to read some information about Event, it is often lost in a large number of attributes, most of which cannot run well in most browsers. Here is a list of compatibility for event.
I don't plan to list these attributes, because those situations are so dizzy and will not help your learning a little. Before writing 5 codes, I need to ask 5 questions about the browser.
1. What is the type of event?
2. Which HTML element is the goal of the event?
3. Which keys are pressed when the event occurs?
4. Which mouse button was pressed when Event occurred?
5. Where is the mouse position when the Event occurs?
I have given a very detailed answer to the last question here.
Please note that I did very rigorous object checking for these codes. I first create cross-browser access to events, and then do browser support checks before using each property.

1. What is the type of event?
This is a cross-browser, with a standard answer: Use the type attribute to view its properties:




2. Which HTML element is the goal of the event?
W3C/Netscape says: target. No, Microsoft said it was srcElement. Both properties return the HTML element when the event occurs.


The last two lines of code are specifically for Safari. If the event occurs on an element containing text, the text node instead of the element itself becomes the target of the event. So we want to check if the target's nodetype is 3 (text node). If so, we move it to the parent node, HTML element.
Even if the event is captured or bubbles up, the target/srcElement property is still the earliest element to occur in the event.
Other targets
There are many targeting properties. I discussed currentTarget in the Event Order article, and relatedTarget, fromElement and toElement in the Mouse event article.


3. Which keys are pressed when the event occurs?
This question is relatively simple. First, get the code for the key from the keyCode property (a=65). After you get the key value, you can use the() method to know the actual key value, if necessary.


There are some places here that may cause keyboard events to be more difficult to use. For example, the time when the kepress event is triggered is as long as the time the user presses the key. However, the trigger time of keydown in most browsers is as long as it is pressed. I'm not sure if this is a good idea, but that's it.


4. Which mouse button was pressed when Event occurred?
Here are two properties that can tell which mouse button has been pressed: which and button. Note that these properties usually do not necessarily work on click. To safely detect which mouse key is pressed, you'd better use mousedown and mouseup events.
which is an ancient Netscape property. The value of the left mouse button is 1, the value of the middle button (roller) is 2, and the value of the right mouse button is 3. There is no problem except that it is weak in support, but it is actually often used to detect mouse buttons.
Now the button attribute can be well recognized. The standard values ​​of W3C are as follows:
Left button 0
Middle key 1
Right click 2
Microsoft's standard values ​​are as follows:
Left button 1
Middle key 4
Right click 2
There is no doubt that Microsoft's standards are better than W3C's. 0 can mean that there is no key press, and the rest are unreasonable.
In addition, only the values ​​of the keys can be combined in Microsoft's model. For example, 5 means "left key and middle key" pressed together. Not only does IE6 not support merging, the w3c model cannot be theoretically completed: you will never know if the left button has been pressed.
So in my opinion w3c has serious mistakes in defining buttons.

Right-click
Fortunately, usually you want to know if the right click is clicked. Because W3C and Microsoft happen to define the button with a value of 2 on this issue, you can still detect the right click.


It should be noted that Macs usually only have one key, and Mozilla defines the value of the button that Ctrl-Click to Ctrl-Click as 2, so Ctrl-Click will also open the menu. ICab does not support the mouse button attribute, so you cannot detect right-click in Opera.
5. Where is the mouse position when the Event occurs?
The mouse position problem is quite serious. Although there are no less than 6 pairs of mouse coordinate attributes, there is still no reliable cross-browser method to find the mouse coordinates.
Here are the 6 sets of coordinates:
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
I've explained the issues with pageX/Y and clientX/Y here.
screenX and screenY are the only cross-browser-compatible properties. They give the coordinates of the mouse across the entire computer screen. Unfortunately, this information alone is far from enough: you never need to know where the mouse is on the screen -- well, or you want to place a new window in the current mouse position.
The other three pairs of attributes are not important, see the description here.
Correct code
The following code can correctly detect the mouse coordinates


The original text is here: /js/events_properties.html

Please give me some advice on my twitter: @rehawk