Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE attachEvent: Does it pass an event object to the listener?

    Hi all,

    I'm a little confused about the following code:

    Code:
    <html>
    <head>
    <title>Test attachEvent</title>
    <style>
    body {
        font-family     : verdana;
        font-size       : 9pt;
    }
    </style>
    <script>
    function highlight(e) {
        var props = [];
        for (key in e) {
            props.push(key);
        }
        props.sort();
        alert(props.join("\n"));
        alert(e === window.event);
    }
    
    window.onload = function() {
        document.getElementById('test_normal').onchange = highlight;
        document.getElementById('test_attach').attachEvent("onchange", highlight);
    }
    </script>
    </head>
    <body>
    
    <form>
        <select id="test_normal">
            <option>normal</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
        </select>    
        
        <select id="test_attach">
            <option>attachEvent</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
        </select>
    </form>
    
    </body>
    </html>
    What I'm trying to do is to write a script that has a cross-browser event registering and listening part. Nothing spectacular at all, but my routine to get at the event object in IE always failed because I assumed that IE doesn't get an event object passed as first parameter like in IE, and that you'd have to use the global window.event object instead. However, a check on the parameter "e" always returned "object" as type, so I wrote the test case above to see what's actually contained in the parameter.

    If you try out the test code, you see that for normal/standard event registering nothing is passed to highlight(). But if I register the event with attachEvent(), I get an event-like object passed with a bunch of useful properties, but it's nt the global window.event object... how bizarre. That's not at all what I expected, though it's quite nice that it happens.

    Can anyone provide some insight whether attachEvent() changes the event-handling model of IE, or more generally, if you are able to reproduce the described results? The MS manual doesn't mention this particular behaviour. For reference, my IE version is IE6 SP1 + various security updates.
    De gustibus non est disputandum.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Intersting.
    I tested your code in IE6 SP1, IE5.5 SP2 and IE5.0 SP2 all running on Win2000
    IE6 and IE5.5 produce the described results.
    IE5.0 throws the "object not supported" error - I was too lazy to investigate...

    I made the following changes to your code to show that the object passed to event handling function is just a copy of the global event object:
    Code:
    <html>
    <head>
    <title>Test attachEvent</title>
    <style>
    body {
        font-family     : verdana;
        font-size       : 9pt;
    }
    </style>
    <script>
    function highlight(e) {
       	var props = [];
        for (key in e) {
            props.push(key);
        }
        props.sort();
    	str = '';
    	for(i=0; i<props.length; i++) str += props[i] + ' = ' + e[props[i]] + '\n\r';
    	document.getElementById('e').firstChild.nodeValue = str;
    	props = [];
        for (key in window.event) {
            props.push(key);
        }
        props.sort();
        str = '';
    	for(i=0; i<props.length; i++) str += props[i] + ' = ' + window.event[props[i]] + '\n\r';
    	document.getElementById('w').firstChild.nodeValue = str;
    	
    }
    
    window.onload = function() {
        document.getElementById('test_normal').onchange = highlight;
        document.getElementById('test_attach').attachEvent("onchange", highlight);
    }
    </script>
    </head>
    <body>
    
    <form>
        <select id="test_normal">
            <option>normal</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
        </select>    
        
        <select id="test_attach">
            <option>attachEvent</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
        </select>
    </form>
    <pre id="e" style="width:40%; float:left;">&nbsp</pre>
    <pre id="w" style="width:40%;">&nbsp</pre>
    </body>
    </html>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shouldn't you use event? Gecko uses the parameter passed from the function, but IE uses the event object of the window object.

    Code:
    function highlight() {
    	var props = [], e = event;
    	for (key in e) {
    		props.push(key);
    	}
    	props.sort();
    	alert(props.join("\n"));
    }
    Hope that helps!

    Happy coding!
    Last edited by nolachrymose; 05-23-2004 at 02:49 PM.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Vladdy for taking a detailed look at this and yes, judging from your code it definitely seems like "e" is a copy of "window.event". Which is helpful to know. Still I wonder why there doesn't seem to be any documentation of this behaviour anywhere on this issue. Isn't it common practice to use attachEvent() as an inferior substitute for addEventListener()? I'm a little behind contemporary javascripting, as I'm mostly hacking PHP scripts together.

    As for IE5.0 throwing an error, that's probably due to the usage of Array.push() for adding the properties of the event object. push() is not supported in IE5.0.
    De gustibus non est disputandum.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @nolachrymose: That's what I suspected for an event handler assigned through attachEvent() as well, but the test code above suggests a different behaviour. Try it for yourself.
    De gustibus non est disputandum.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I know that my script is the only one that captures events of an element (which pretty much most of the times), I define the event processing function directly:
    Code:
    element.onclick = function(e)
      { ....
      }
    That makes an easier workaround for the differences between IE and Gecko event interface. The event targets become:
    Code:
    var target=e?e.target:window.event?window.event.srcElement:null;
    var currentTarget=e?e.currentTarget:window.event?this:null;
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •