Js obtains event objects and elements
There are many methods to obtain the event source and the objects that trigger the event. js can be implemented through event. The following is a good example. If you are interested, refer
An Html element has The onclick method: onclick = 'Return myfunction (event )'
The Code is as follows:
Function myfunction (event ){
Event = event? Event: window. event;
Var obj = event. srcElement? Event. srcElement: event.tar get;
// In this case, obj is the object that triggers the event. You can use its attributes.
// You can also convert obj to a jquery object to facilitate the selection of other elements.
Var $ obj = $ (obj );
Alert ($ obj. parent (). attr (href ));
The 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:
Div1 Element
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:
Div1 Element
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 example
Copy codeThe Code is as follows:
Div1 Element
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 information 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
Copy codeThe Code is as follows:
Div1 Element
In IE, an error is reported, indicating that arguments.0.type is null or not an object.
The click content dialog box appears in Firefox, Opera, Safari, and Chrome, indicating that all event objects can be passed in 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:
Div1 Element
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:
Div1 Element
Div1 Element
The difference between the two divs is window. event. type and event. type. Click respectively. The latter does not display undefined in Firefox, but click because the anonymous function defines the parameter event in Firefox, which is exactly the same as the Global Object event of IE, in this way, 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:
Div1 Element
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>
Div2 Element
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>
Div2 Element
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
Copy codeThe Code is as follows:
<Script type = text/javascript>
Function clk () {alert (event );}
</Script>
Div2 Element
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>
Div2 Element
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 figure
Copy codeThe Code is as follows:
<Script type = text/javascript>
Function clk (e) {alert (e );}
</Script>
Div2 Element
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:
Div3 Element
<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 IE
Copy codeThe Code is as follows:
Div4 Element
<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 figure
Copy 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 correctly displayed in IE/Opera/Safari/Chrome, and undefined is displayed in Firefox, Which is 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
Copy 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.
