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:a...@doxdesk.com http://www.doxdesk.com skype:uknrbobince gtalk:chat?jid=bobi...@gmail.com _______________________________________________ JSMentors mailing list JSMentors@jsmentors.com http://jsmentors.com/mailman/listinfo/jsmentors_jsmentors.com