JavaScript Event Learning Chapter 6: Event access

In this chapter, I will explain how to access an event object.

Now we have registered an event handler and want to learn more about the event. We want to know the mouse position when the event occurs, and what keys the user presses. These are all possible, although this part has many annoying browser compatibility problems. (Here you can quickly view the browser compatibility list ).

To read the attribute of an event, you must first be able to access the event.

Browser compatibility
From the perspective of browser war, Netscape has implemented an access model (which was later referenced by W3C) and many event attributes, and Microsoft has done the same thing. Of course, these two models are completely incompatible. But as we mentioned in the introduction, if

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

This is an incorrect solution to the compatibility problem. It will make some browsers that can execute most of the Code but are not considered ineffective. Therefore, we must first access an event and then read its attributes separately.

We will first discuss the access event. The event attributes will be discussed later.

W3C/Netscape
In the W3C/Netscape event access model, events are passed to the event handler as a parameter. So if you define an event handler

Element. onclick = doSomething; <BR>

DoSomething () treats the event as a parameter. Traditionally, it is stored in an e variable. Of course, you can change it to any name:

Function doSomething (e) {<BR> // e gives access to the event <BR >}< BR>

This is completely automatic and no other code is required. In an anonymous function, you can write as follows:

Element. onclick = function (e) {alert ('event type is '+ e. type)} <BR>

Microsoft
In Microsoft's event access model, there is a special attribute window. event that contains the last event.

Element. onclick = doSomething; <BR> function doSomething () {<BR> // window. event gives access to the event <BR >}< BR>

Or

Element. onclick = function () {alert ('event type is '+ window. Event. type)} <BR>

Event and event
Note that there is also an old Netscape attribute window. Event. IE doesn't know this, and Netscape 4 will misinterpret it. Therefore, make sure that the event starts with lowercase e.

Cross-browser event access
Fortunately, it is very easy to write a script for cross-browser access events:

Element. onclick = doSomething; <BR> function doSomething (e) {<BR> if (! E) var e = window. event; <BR> // e gives access to the event in all browsers <BR >}< BR>

If e does not exist, assign window. event to it. E indicates an event in all browsers.

Merge with Inline event handlers
In the internal registration model, you must pass the event to the function:

<Pre onclick = "doSomething (event)"> <BR> function doSomething (e) {<BR> alert (e. type); <BR >}< BR>

Although window. event is a correct attribute in the Microsoft model, other browsers can recognize it.

If you want to continue learning, please refer to the next chapter.

Address: http://www.quirksmode.org/js/events_access.html
Author: Beiyu (tw: @ rehawk)
Article Source: http://beiyu.cnblogs.com