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

mordred

05-23-2004, 01:18 PM

Hi all,

I'm a little confused about the following 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.

Vladdy

05-23-2004, 02:26 PM

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:
<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>

nolachrymose

05-23-2004, 02:43 PM

Shouldn't you use event? Gecko uses the parameter passed from the function, but IE uses the event object of the window object.

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

Hope that helps!

Happy coding! :)

mordred

05-23-2004, 02:53 PM

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.

mordred

05-23-2004, 02:56 PM

@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. :)

Vladdy

05-23-2004, 03:10 PM

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:

element.onclick = function(e)
{ ....
}

That makes an easier workaround for the differences between IE and Gecko event interface. The event targets become:
var target=e?e.target:window.event?window.event.srcElement:null;
var currentTarget=e?e.currentTarget:window.event?this:null;