Attention: We are retiring the ASP.NET Community Blogs. Learn more >

Scrutinize keyboard event handler syntax in different browers

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:
  • Pass built-in "event" object as argument
  • Pass source trigger object as argument
  • Pass an arbitrary object as argument ( error )
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

No Comments