Source :
<script type="text/javascript">
function keyEventArgsChecking(e) {
var msg = "";
// The "event" declaration will cause error in FireFox . We should use window.event instead.
// In other words , code line below can be avoid in IE context.
var event = window.event;
if (event) {
msg = "Checking is under IE / Google Chrome <hr>";
msg +=
new Array(
"window.event is valid in such context. window.event property : ",
"type : " + event.type,
"keyCode : " + event.keyCode,
"srcElement : " + event.srcElement
).join("<br>");
}
else
msg = "Checking is under FireFox";
msg +=
"<hr>" +
new Array(
"current argument's property : ",
"type : " + e.type,
"keyCode : " + e.keyCode,
"which : " + e.which,
"srcElement : " + e.srcElement,
"target : " + e.target
).join("<br>");
divMsg.innerHTML = msg;
}
</script>
Type some text to trigger key event:
<ul>
<li>
<input type="text" onkeypress="keyEventArgsChecking(event)" />
Pass built-in "event" object as argument</li>
<li>
<input type="text" onkeypress="keyEventArgsChecking(this)" />
Pass source trigger object as argument</li>
<li>
<input type="text" onkeypress="keyEventArgsChecking(foo)" />
Pass an arbitrary object as argument ( error ) </li>
</ul>
<div id="divMsg">
</div>Effect:
Type some text to trigger key event:
Conclusion:
From above scripts we can draw these conclusions:
- Neither "event" nor "this" is necessary to be passed as eventHandler's argument In IE/Chrome , because we can get keyboardEvent object directly from window.event property ( window.event.keyCode ...) and access event source via window.event.srcElement ( in Chrome window.event.target is also valid ). If "event" passed to "e" , "e" is identical to "window.event" ; If "this" passed to "e" , "e" is identical to "window.event.srcElement(target)".
- Although eighter "event" or "this" is valid eventhandler argument in FireFox , passing "this" could only access the event source object whereas lose the thread attaching keyboard event itself ! We will be at a loss to find which key is pressed and unable to further route logic anymore. In such case , "event" is a highly recommended choice for it is the only entry to access keyboard event object . Source can be picked through "event.target" property.
- Groogle Chrome ( GC ) is "most compatible" when comparing with IE / FF. Some key properties are all accessable to GC. Let's take the event object as example. Blank cell means the property behaves normally in corresponding brower.
event ( window.event in IE ) properties' accessing situation in different browers
|
IE |
GC |
FF |
| keyCode |
|
|
always 0 |
| which |
undefined |
|
|
| srcElement |
|
|
undefined |
| target |
undefined |
|
|