Setting events dynamically

Question

I have this function that that I invoke onload:

function InitAll(){
   document.getElementById("div1").onmouseover = function(){Foo(event,this);};
   document.getElementById("div1").onmouseout  = function(){Foo(event,this);};
}

function Foo(e, handler){    
   document.getElementById("label1").innerHTML=e.type;
}

In IE it works and I get the right e.type, but in firefox it does not:

event is not defined

But if I set events statically,like:

<div id="div1" onmouseover="Foo(event,this);" onmouseout="Foo(event,this);" >

it works for both browsers.

What am I missing? some kind of closure?

Answer 1

Try taking the event object as the argument and replacing it with window.event if it is null.

function InitAll(){
   document.getElementById("div1").onmouseover = function(e){
      e = e || window.event;
      Foo(e,this);
   };
 ...
}

Though, honestly, I would look at using jQuery or some other framework for all of this. There's no sense in reinventing the wheel in most cases. I might do so when writing your own framework, but in most cases you'll save time and headaches with a framework.