Javascript Event caller not being passed into params

Question

I'm working on the following onmouseover function in javascript

function fnNavMouseOver(evt) {
    alert(evt.target);
    var eSrc
    evt = (evt) ? evt : (window.event) ? window.event : ""
    eSrc = (evt.target) ? evt.target : evt.srcElement
    alert(eSrc);
}

I'm under the impression that in firefox the event should be passed into the function. However evt seems to be coming in as null. Is there anything that could be causing this?

Edit :

The code that calls this method works like this

ButtonHTML += "<img onmouseover='fnNavMouseOver()' id='" + ButtonId + "Norm' src='" + ImgPath + "_n.jpg' style='border-style:none;z-index=102;position:absolute;left:0px;top:0px'>";

That string then gets appended to a div on the page. I realize this really isnt ideal but I'm working with an old framework and trying to shoe horn some new functionality in.

Answer 1

The best method of reading event properties:

http://www.quirksmode.org/js/events_properties.html

His method works across all browsers.

Answer 2

If you set the element's mouseover event handler outside the HTML element, I think you will get the event passed to your function.

In your usage, you are essentially doing this:

element.onmouseover = function () { yourfunction() };

rather than this:

element.onmouseover = yourfunction

which is what you want to be doing. Since you are invoking your function with no arguments, it is receiving no arguments, resulting in Null values being passed in.

Answer 3

I agree with the answer regarding unobtrusive assignment of the event handler, but for what it's worth, you could continue to use the HTML onmouseover attribute by passing the event object as a parameter...

onmouseover="fnNavMouseOver(event);"