Yu-Hsuan Lai <raincolee at gmail.com> wrote:
> I'm very confused about what 'event' means...
Not surprisingly, since it contains spooky magic, and *different* magic
in IE to the other browsers.
> <body onmousedown="showEvent(event)">
> Why can the argument 'event' work?
When you use an `onsomething="..."` attribute, a new Function object is
implicitly created. Its body is the string value of the attribute, and
it has one argument called `event`, as if you'd written:
document.body.onmousedown= function(event) {
showEvent(event);
};
As a consequence, you can also look at `arguments.length` to get `1` and
`arguments[0]` to get the event object again, from code inside an event
handler attribute, even though that code doesn't *appear* to be in a
function!
...That is, *except* on IE.
In IE, `showEvent(event)` works for a completely different reason.
`event` is a property of `window`, so you're getting it as a global
variable instead of a local argument. `arguments.length`, should you
look at it, is `0`.
There is more magic involved with event handler attributes, too! The
new, implicitly-created function scope is given a closure over multiple
additional scopes: one to access every property of the node object as a
variable, and one for each of the ancestor nodes to do the same for
those. For example:
<script>
var form= 1, method= 2, onload= 3, body= 4;
</script>
<form>
<input onclick="alert(form+' '+method+' '+onload+' '+body)">
</form>
What do you think you'll get when you click on the input? `1 2 3 4`
maybe? Nope, that would be too easy.
You get `[object] get null [object]`. Because `form` is a property of
`HTMLInputElement`, `method` is a property of the parent
`HTMLFormElement`, `onload` is a property of the implicit ancestor
`HTMLBodyElement` (*except* in Firefox, which leaves unbound event
properties unset rather than setting them to `null`, so the `3` actually
gets through here!), and `body` is a property of the `HTMLDocument`.
Ha ha! Hope you weren't using any global variable names that happen to
have the same name as... *any* DOM node property... the list of which
grows which each new browser release, potentially breaking your existing
code each time. Isn't that great?
This magic - these 'useful' convenience features - might also be
described as a vile, fragile factory of fail. This is just another
reason to **avoid event handler attributes**. Assign a function object
to the handler properties and code around the IE `event` problem
manually, eg:
document.body.onmousedown= function(event) {
if (arguments.length===0) event= window.event;
...
};
Or of course `addEventListener` with fallback to `attachEvent`, or
library-function-of-choice.
--
And Clover
mailto:[email protected] http://www.doxdesk.com
skype:uknrbobince gtalk:[email protected]
_______________________________________________
JSMentors mailing list
[email protected]
http://jsmentors.com/mailman/listinfo/jsmentors_jsmentors.com
