Event handler with document object

Use of parenthesis when assigning event handler

[bmac2560]

I noticed that if I use the parentesis when I assign an event to a function such as document.onmouseover=mOver(), I cannot test for the event.srcElement within the event handler. If I leave off the parenthesis after mOver, everything works fine. Why is this different then when you put a mouse event within an HTML tag. Just curious.

[tedster]

Welcome to Webmaster World bmac2560.

Now there's one heck of a first question! I never came across this myself. It sounds very odd, on the face of it. I'd be intersted if one of our JS folks has an answer here.

[MikeFoster]

document.onmouseover

In this case, onmouseover is a property of the document object. This is part of the browser's object model, exposed through javascript. It should be assigned a function reference, that is, the name of a function.

<a onmouseover="myListener()">myLink</a>

In this case, onmouseover is an HTML attribute. All HTML attribute values are strings. So here, you must assign a string to onmouseover, and later this string will be evaluated by the javascript interpreter.

[MikeFoster]

document.onmouseover = myListener();

The above expression first calls the function and then assigns the "return value" to variable on the left.

document.onmouseover = myListener;

The above expression assigns the value of the variable on the right to the variable on the left. In this case the value of myListener is a "pointer" or reference to the function itself.

[MikeFoster]

The above assumes that myListener is the name of a defined function, as in

function myListener(e)
{
window.status = e.target.nodeName;
}

[bmac2560]

Very impressive Mike! Thanks alot.