Scrutinize keyboard event handler syntax in different browers
<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:
- Pass built-in "event" object as argument
- Pass source trigger object as argument
- Pass an arbitrary object as argument ( error )
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