JavaScript Event Learning Chapter 6 Event Access_Javascript Skills

Now that we have registered event handlers, we want to learn more about events. We want to know the mouse position when the event occurred, and we want to know what keys the user pressed. These are all possible, although there are a lot of annoying browser compatibility issues with this part. (You can quickly check the browser compatibility list here).
To read the properties of an event, you must first be able to access the event.
Browser compatibility
From the perspective of the browser war, Netscape implemented an access model (later used as a reference by W3C) and many event attributes, and Microsoft also did the same thing. Of course the two models are completely incompatible. But as we said in the introduction, if

copy the code the code is as follows:

if (W3C/Netscape) {
use W3C/Netscape model for access and property names
}
else if (Explorer) {
use Microsoft model for access and property names
}

This is an incorrect way to solve compatibility issues. It will render useless some browsers that can execute most of the code but did not take it into account. So we have to access an event first and then read its properties separately.
Let’s discuss the issue of accessing events first, and event attributes will be discussed later.
W3C/Netscape
In the W3C/Netscape event access model, events are passed as a parameter to the event handler. So if you define an event handler
element.onclick=doSomething;

doSomething() will take the event as a parameter. It is customary to save it in an e variable, of course you can change it to any name:

Copy the code The code is as follows:

function doSomething(e) {
// e gives access to the event
}

This is completely automatic and no additional code is required. In an anonymous function you can write like this:
element.onclick = function (e) {alert('Event type is ' e.type)}

Microsoft
In Microsoft's event access model There is a special property window.event that contains the last event that occurred.

Copy code The code is as follows:

element.onclick = doSomething;

function doSomething() {
// window.event gives access to the event
}

or

Copy code The code is as follows:

element.onclick = function () {alert('Event type is ' window.event.type)}

Event and event
Notice that there is also an old Netscape attribute window.Event. IE doesn't understand this, and Netscape 4 will misinterpret it. So when writing, be sure to make sure event starts with a lowercase e.
Cross-browser event access
Fortunately, it is very simple to write scripts for cross-browser access events:

Copy code The code is as follows:

element.onclick = doSomething;

function doSomething(e) {
if (!e) var e = window.event ;
// e gives access to the event in all browsers
}

If e does not exist, then assign it to window.event. e now represents events in all browsers.
Merge with inline event handlers
In the inline registration model, you must pass the event to the function:

Copy code The code is as follows:

 

function doSomething(e) { 
alert( e.type); 
} 

Although (window.) event is the correct attribute in the Microsoft model, other browsers can also recognize it.
Continue
If you want to continue learning, please read the next chapter.
Original address: http://www.quirksmode.org/js/events_access.html
First translation. Please include my twitter: @rehawk