Retrieve the entire family of event objects

The acquisition of event objects is very simple. A long time ago, we knew that the event object in IE is a global object (window. event) exists. In Firefox, it is passed in as the first parameter of the handle (handler. So one lineCodeYou can do it,

 
VaR EVT = Window. Event | arguments [0];
 

There are three ways to add events:

1. The first method to add events is to directly write JS Code in HTML attributes.

 
<Div onclick = "alert (4);"> div1 element </div>
 

Probably this was written in the 1990s S. At that time, it was common to directly write JS Code on webpages. Maybe JavaScript was not very important at that time, but it was just used for verification or some fancy effects. How can I get the event object in this way of adding events?

In IE, it is very simple. Because event is a global object, you can directly use event as follows:

 
<Div onclick = "alert (window. event. type);"> div1 element </div>
 

After you click this Div, The 'click' message box is displayed in IE. It indicates that the event object has been obtained. If it is tested in opera/Safari/chrome, it will find that the effect is the same as that of IE, indicating that the IE Method (window. event) to obtain the event object.

In Firefox, an error is reported. The Prompt window. event is undefined, indicating that Firefox does not support retrieving event objects in IE mode but is passed in as the first parameter of the handle,ArticleThe comments mentioned at the beginning.

In the above example, window. event is used to obtain the event object. In fact, window can be omitted, just like using alert instead of window. Alert. For example

 
<Div onclick = "alert (event. type);"> div1 element </div>
 

The test in IE/Opera/Safari/Chrome is no different from that in the past. If you try again in Firefox, you will find that the "click" message box pops up instead of "undefined ".

The difference between the two tests is that one uses window. event. type and the other uses event. type. This issue is discussed in detail below.

The following uses the first parameter of the handle to obtain the event object. You can think of the value of the onclick attribute as an anonymous function. The String Of The onclick attribute value is actually the JS Code in this anonymous function.
In this case, the first parameter of the anonymous function can be obtained through a function attribute argumengs, which is the event object. For example

 
<Div onclick = "alert (arguments [0]. type);"> div1 element </div>
 

In IE, an error is reported, indicating that arguments.0.type is null or not an object.
The "click" content dialog box is displayed in Firefox, opera, Safari, and chrome, indicating that all event objects can be input as the first parameter of the handle. It also shows that opera/Safari/chrome not only supports the W3C standard way To get event objects, but also supports the IE Method to get event objects.

Now that onclick corresponds to an anonymous function, we can print out the anonymous function. You only need the following code:

 
<Div onclick = "alert (arguments. callee);"> div1 element </div>
 

Click the DIV in each browser and the result is as follows:

IE:
Function onclick () {alert (arguments. callee );}

Firefox/Safari:
Function onclick (event) {alert (arguments. callee );}

Chrome:
Function onclick (EVT) {alert (arguments. callee );}

Opera:
Function anonymous (event) {alert (arguments. callee );}

Observe these functions and find that IE does not have a defined parameter. Firefox/Safari/opera defines the parameter event, and chrome defines the parameter EVT.

Now let's go back to the issues left over, as shown below:

<Div onclick = "alert (window. event. type); "> div1 element </div> <Div onclick =" alert (event. type); "> div1 element </div>
 

The difference between the two divs is window. event. Type and event. type. The latter does not pop up "undefined" in Firefox, but "click" because the anonymous function defines the parameter event in Firefox, this parameter exactly has the same name as the Global Object event of IE. Therefore, Firefox also supports retrieving event objects in IE mode.

Similarly, if the parameter defined in Chrome is EVT, you can obtain the event object in chrome in the following ways:

 
<Div onclick = "alert (EVT);"> div1 element </div>
 

2. The second method is to add events. Define a function and assign the onxxx attribute to the HTML element.

 
<SCRIPT type = "text/JavaScript"> function CLK () {}</SCRIPT> <Div onclick = "CLK ()"> div2 element </div>
 

Define the function CLK first and assign it to The onclick attribute. This method should also be popular in the 1990s S. Better than the first method, it encapsulates all the business logic code in a function, so that the HTML code and JS Code are slightly separated, so that the first method is not tightly coupled.

In this way (within the CLK function), how does one obtain event objects? It is still okay to use the global object event in IE, for example:

 
<SCRIPT type = "text/JavaScript"> function CLK () {alert (window. event) ;}</SCRIPT> <Div onclick = "CLK ()"> div2 element </div>
 

After you click Div, ie, opera, Safari, and chrome can get the event object normally except Firefox. As mentioned above, the opera/Safari/chrome compatible IE Method (window. Event) is used to obtain event objects, which is not supported by Firefox alone. Therefore, Firefox can only pass in parameters.

Try to write this

 
<SCRIPT type = "text/JavaScript"> function CLK () {alert (event) ;}</SCRIPT> <Div onclick = "CLK () "> div2 element </div>
 

In Firefox, the anonymous function has the event parameter, while CLK () is within the anonymous function. print out the anonymous function.

 
<SCRIPT type = "text/JavaScript"> function CLK () {alert (arguments. callee. caller) ;}</SCRIPT> <Div onclick = "CLK ()"> div2 element </div>
 

Click the Div. The content of the Firefox Pop-up dialog box is as follows:

Function onclick (event) {CLK ();}
 

Return to alert (event) in CLK. Since the event of the anonymous function is passed in, CLK can get the event in the closure. In fact, the Firefox will report an error after clicking: event is not defined. Assume that the closure of the anonymous function and function CLK () {alert (event) ;}are not in the same closure environment.

If this method does not work, you can only pass in the displayed parameters, as shown in figure

 
<SCRIPT type = "text/JavaScript"> function CLK (e) {alert (e) ;}</SCRIPT> <Div onclick = "CLK (arguments [0]) "> div2 element </div>
 

Click Div, and the event object is correctly displayed in Firefox. all browsers that support parameter input can, such as opera/Safari/chrome.
Change arguments [0] in the above Code to event, so all browsers support it.
Change arguments [0] in the above Code to window. event, so only Firefox does not support it.
Change arguments [0] in the above Code to EVT, so it will only be supported by chrome.

Think about why?

3. Method 3: add events using the element. onxxx Method

<Div id = "D3"> div3 element </div> <SCRIPT type = "text/JavaScript"> var D3 = document. getelementbyid ('d3 '); function CLK () {alert (4)} If (d3.addeventlistener) {d3.addeventlistener ('click', CLK, false);} If (d3.attachevent) {d3.attachevent ('onclick', CLK) ;}</SCRIPT>
 

This method is also relatively early, but the advantage is that JavaScript and HTML can be completely separated, the premise is that you need to provide an additional ID attribute for the HTML element (or other methods that can obtain the Element Object ).

In this way, you can add an event. ie only supports window. Event and does not support parameter input. Firefox only supports parameter input and does not support other methods. Opera, Safari, and chrome are supported.

4. The fourth method is to add events. The addeventlistener method or the IE exclusive attachevent method is used.

 
<Div id = "D4"> div4 element </div> <SCRIPT type = "text/JavaScript"> var D4 = document. getelementbyid ('d4 '); function CLK () {alert (4)} If (d4.addeventlistener) {d4.addeventlistener ('click', CLK, false);} If (d4.attachevent) {d4.attachevent ('onclick', CLK) ;}</SCRIPT>
 

This method is currently recommended. It is more powerful than the first two methods. You can add multiple handles (or response functions) to an element and support event bubbling or capturing, the first two methods are bubble by default. Of course, IE6/7/8 still does not follow the standard and uses its proprietary attachevent, and does not support event capture. Addeventlistener is supported in ie9.

First test with window. event, as shown in figure

 
<SCRIPT type = "text/JavaScript"> var D4 = document. getelementbyid ('d4 '); function CLK () {alert (window. event)} If (d4.addeventlistener) {d4.addeventlistener ('click', CLK, false);} If (d4.attachevent) {d4.attachevent ('onclick', CLK);} </SCRIPT>
 

When you click Div [ID = D4], the event object information box is displayed correctly in IE/Opera/Safari/chrome, and "undefined" is displayed in Firefox. expected, because Firefox does not support windows. event is used as the event object.

Replace it with the first parameter test of the handle, as shown in figure

 
<SCRIPT type = "text/JavaScript"> var D4 = document. getelementbyid ('d4 '); function CLK (e) {alert (e)} If (d4.addeventlistener) {d4.addeventlistener ('click', CLK, false);} If (d4.attachevent) {d4.attachevent ('onclick', CLK) ;}</SCRIPT>
 

Before testing, you may think that undefined should be displayed in IE, and other browsers are event objects. In fact, the information box displayed in all browsers is an event object.

Summary:

1. ie supports retrieving objects through window. event. When adding events through attachevent, it also supports passing the event object as the first parameter of the handle.

2. Firefox only supports passing the event object as the first parameter of the handle

3. Opera, Safari, and chrome support both methods.