Now that we have registered the event handler, we would like to have a deeper understanding of the event. We wanted to know where the mouse was when the event occurred, and we wanted to know which keys the user pressed. These are all possible, although this part has a lot of annoying browser compatibility issues. (A quick view of the browser Compatibility list is available here.)
To read the properties of an event, you must first be able to access the event.
Browser compatibility
From the point of view of the browser war, Netscape implemented an access model (which was later referenced by the consortium) and many event attributes, and Microsoft did the same thing. Of course, the two models are completely incompatible. But as we said in the brief, if
Copy Code code as follows:
if (W3c/netscape) {
Use W3c/netscape the model for access and property names
}
else if (Explorer) {
Use the Microsoft model for access and property names
}
This is not the right way to solve the compatibility problem, he will let some of the code can be executed, but not to consider the browser to lose their role. So we have to access an event first and then read his attributes separately.
Let's discuss the problem of accessing the event first, and the event properties are 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 an argument. It's customary to keep it in an e variable, and of course you can change it to any name:
Copy Code code as follows:
function DoSomething (e) {
E gives access to the event
}
This is completely automatic and requires no additional code. In the anonymous function you can write this:
Element.onclick = function (e) {alert (' Event type is ' + E.type)}
Microsoft
In the Microsoft Event access model, there is a special attribute window.event containing the last occurrence of the event.
Copy Code code as follows:
Element.onclick = dosomething;
function dosomething () {
Window.event gives access to the event
}
Or
Copy Code code as follows:
Element.onclick = function () {alert (' Event type is ' + Window.event.type)}
Event and Event
Note that there is also an ancient Netscape attribute window.event. IE does not know this, and Netscape 4 will misinterpret him. So when you write, make sure that the event is a lowercase e start.
Cross-browser event access
Fortunately, the scripting of accessing events across browsers is very simple:
Copy Code code 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 give him a value window.event. E now represents events in all browsers.
Merging with inline event handlers
In an inline registration model, you must pass the event to the function:
Copy Code code as follows:
<pre onclick= "dosomething (event)" >
function DoSomething (e) {
alert (E.type);
}
Although in the Microsoft Model (window.) The event is the correct attribute and can be recognized by other browsers.
Go on
If you want to continue to study, please read the next chapter.
Original address: http://www.quirksmode.org/js/events_access.html
For the first time, everyone included my Twitter: @rehawk
