Copy Code code as follows:
var evt = window.event | | Arguments[0];
Here are three ways to add events to your discussion, and you may see a way to get things you haven't seen before.
1, the first way to add events, directly in the HTML properties of the write JS code
Copy Code code as follows:
<div onclick= "alert (4);" >div1 element</div>
Probably this is the last century 90 's writing, then directly to write JS code in the Web page is very common, perhaps at that time JS is not too important, just to do the verification or some fancy effect. How do I get to an event object in this way of adding events? IE is very simple, because event is a global object, so use the event directly, as follows
Copy Code code as follows:
<div onclick= "alert (window.event.type);" >div1 element</div>
Click on the div, IE will pop up the ' click ' Character information box. Indicates that the event object has been acquired, and if tested in Opera/safari/chrome, it will find that the effect is the same as IE, which means that the opera/safari/chrome also supports IE (window.event) to get the event object.
Firefox will be an error, hint: window.event is undefined, that Firefox does not support IE way to get the event object but with the first parameter of the handle passed in, the article said at the beginning of the comment.
The above uses window.event to get the event object, in fact, window can omit, just like using alert instead of Window.alert. Such as
Copy Code code as follows:
<div onclick= "alert (event.type);" >div1 element</div>
Test in Ie/opera/safari/chrome, and just don't have any difference. Re-test in Firefox, there will be a surprise, you will find unexpectedly pop-up is "click" Information box, rather than "undefined."
Two test differences only one with Window.event.type, one with Event.type. This question is discussed in detail below.
Using the first parameter of the handle to get the event object, you can think of the value of the onclick attribute as an anonymous function, and the string of the onclick attribute value is actually the JS code within the anonymous function.
In this way, we can get to the first parameter of the anonymous function through a property argumengs of function, which is the event object. Such as
Copy Code code as follows:
<div onclick= "alert (arguments[0].type);" >div1 element</div>
In IE will be an error, prompt: Arguments.0.type is empty or not object
A message box that pops up the "click" Content in Firefox/opera/safari/chrome indicates that they all support the event object being passed as the first argument in the handle. From the side also shows that opera/safari/chrome not only support the standard way to get event objects, but also compatible with IE way to get event objects.
Now that we know that onclick corresponds to an anonymous function, we might as well print out the anonymous function, just the following code
Copy Code code as follows:
<div onclick= "alert (Arguments.callee);" >div1 element</div>
Click on the div in each browser and the results are 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 function discovery:
IE6/7/8 no parameters defined
Ie9/firefox/safari/opera defines the argument event
Chrome defines the parameter evt.
Now back to the problems left above, as follows
Copy Code code as follows:
<div onclick= "alert (window.event.type);" >div1 element</div>
<div onclick= "alert (event.type);" >div1 element</div>
The difference of these two div is only Window.event.type and Event.type. After clicking, the latter does not eject "undefined" in Firefox, but "click", because the anonymous function in Firefox defines the parameter event, which is exactly the same as the global object event of IE, So that Firefox also support IE way to get event objects.
In the same way, the parameters defined in Chrome are evt, so in chrome you can also get event objects in the following ways:
Copy Code code as follows:
<div onclick= "alert (evt);" >div1 element</div>
2, the second way to add events, define a function, assign values to the OnXxx property of the HTML element
Copy Code code as follows:
<script type= "Text/javascript" >
function CLK () {}
</script>
<div onclick= "CLK ()" >div2 element</div>
Defining the function CLK and assigning it to the onclick attribute is also a popular way of writing in the 90 's. Better than the first method is that it encapsulates the business logic code in a function, so that the HTML code and JS code a little bit apart, not the first one so tightly coupled.
How do I get an event object in this way (within the CLK function)? The use of global object event in IE is still not a problem, such as:
Copy Code code as follows:
<script type= "Text/javascript" >
function CLK () {alert (window.event);}
</script>
<div onclick= "CLK ()" >div2 element</div>
Click Div, in addition to Firefox, Ie/opera/safari/chrome can get the event object normally. The above mentioned Opera/safari/chrome compatible IE mode (window.event) to get event objects, but Firefox does not support. So firefox can only pass through the parameters. Try to write that.
Copy Code code as follows:
<script type= "Text/javascript" >
function CLK () {alert (event);}
</script>
<div onclick= "CLK ()" >div2 element</div>
Because the anonymous function in Firefox has an event parameter, and CLK () is within the anonymous function, the anonymous function is printed out
Copy Code code as follows:
<script type= "Text/javascript" >
function CLK () {alert (arguments.callee.caller);}
</script>
<div onclick= "CLK ()" >div2 element</div>
Click the Div,firefox pop-up message box to read
Copy Code code as follows:
function onclick (event) {
CLK ();
}
Back to CLK alert (event), since the event of the anonymous function is passed in, then in the closure CLK can get to the event, in fact, after the click of Firefox will complain: The event is not defined. Guess the closure and function of the anonymous function CLK () {alert (event);} Not the same closure environment. If this is not possible, it can only be passed through the displayed parameters, such as
Copy Code code as follows:
<script type= "Text/javascript" >
function CLK (e) {alert (e);}
</script>
<div onclick= "CLK (arguments[0)" >div2 element</div>
Click on the Div, in Firefox, the correct pop-up event object, support parameters passed into the browser can be, such as Opera/safari/chrome.
Change the arguments[0 in the above code to event, so all browsers support it.
Change the arguments[0 in the above code to window.event, then only Firefox is not supported.
To change the arguments[0 in the above code to EVT, then only chrome will support it.
Think about why?
3, the third way to add events, using the Element.onxxx method
Copy Code code as follows:
<div id= "D3" >div3 element</div>
<script type= "Text/javascript" >
var d3 = document.getElementById (' D3 ');
D3.onclick = function () {}
</script>
This approach is also relatively early, but the advantage is that you can completely separate JS from HTML, but only if you need to provide an additional id attribute (or other way to get the element object) to the HTML element.
This way to add events IE6/7/8 only support Window.event not support parameter passing in, Firefox only supports parameter passing is not supported in other ways. Ie9/opera/safari/chrome is supported in two different ways.
4, the fourth way to add events, using AddEventListener or IE proprietary attachevent
Copy Code code 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 is the current recommended way, more powerful than the first two ways, you can add more than one handle (or response function) for the element, support event bubbling or capture, the first three ways by default are bubbling. Of course, IE6/7/8 still does not follow the standard and uses its own proprietary attachevent, and does not support event capture. AddEventListener has been supported in the IE9.
First use window.event test, such as
Copy Code code 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>
Click Div[id=d4],ie/opera/safari/chrome all correct pop-up event object information box, Firefox pop-up is "undefined", as expected, because Firefox does not support Window.event as an event object.
Replace with the first parameter test of the handle, as
Copy Code code 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, guess what results, some people may feel that IE should be pop-up undefined, other browsers are event objects. In fact, all browser pop-up information boxes display are event objects.
In summary:
1,IE6/7/8 supports getting objects through window.event, and also supports event objects as the first parameter of a handle when adding events attachevent
2,firefox only supports the event object as the first argument passed in the handle
3,ie9/opera/safari/chrome is supported in two different ways
Related:
List of Browser Event object differences
