Summary of methods for getting event objects in js

Copy codeThe Code is as follows: var evt = window. event | arguments [0];

We will discuss how to add events in three ways. You may see methods you have never seen before.
1. The first method to add events is to directly write JS Code in html attributes.
Copy codeThe Code is as follows: <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? IE is very simple, because the event is a global object, you can directly use the event, as shown below:Copy codeThe Code is 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 the event object in IE mode but is passed in as the first parameter of the handle. The comment mentioned at the beginning of this article.
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 exampleCopy codeThe Code is as follows: <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 exampleCopy codeThe Code is as follows: <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:Copy codeThe Code is as follows: <div onclick = "alert (arguments. callee);"> Div1 Element </div>

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

IE6/7/8:

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

IE9:

Function onclick (event) {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:
No parameter defined in IE6/7/8
IE9/Firefox/Safari/Opera defines the parameter event
Chrome defines the evt parameter.
Now let's go back to the issues left over, as shown below:

Copy codeThe Code is as follows: <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:Copy codeThe Code is as follows: <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.
Copy codeThe Code is as follows: <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:Copy codeThe Code is as follows: <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 thisCopy codeThe Code is as follows: <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.Copy codeThe Code is as follows: <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:Copy codeThe Code 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 figureCopy codeThe Code is as follows: <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
Copy codeThe Code is as follows: <div id = "d3"> Div3 Element </div>
<Script type = "text/javascript">
Var d3 = document. getElementById ('d3 ');
D3.onclick = function (){}
</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, the addition of the event IE6/7/8 only supports window. event and does not support parameter input. Firefox only supports parameter input and does not support other methods. Both IE9, Opera, Safari, and Chrome are supported.
4. Method 4: add events using addEventListener or the proprietary attachEvent of IECopy codeThe Code is as follows: <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 three 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 figureCopy codeThe Code is as follows: <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 figureCopy codeThe Code is as follows: <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. IE6/7/8 supports retrieving objects through window. event. When an event is added using attachEvent, the event object can be passed in as the first parameter of the handle.
2. Firefox only supports passing the event object as the first parameter of the handle
3. Both IE9, Opera, Safari, and Chrome modes are supported.

Related:
List of differences between browser event objects