Take the 2-minute tour ×

If I have some HTML like this:

<a onmouseover='SetTopLeft(this);'href='#'>Click me!</a>

Can I get both the object AND the event in the function? So, for example, can I have a method signature like this?

function SetTopLeft(e, o)

...where e is the event and o is 'this'? I may actually not need the object, but I think I probably DO need the event. I wouldn't mind understanding a little better how this works in JavaScript - i.e., when/how can I pass an event and when/how can I pass the calling object? Can I choose which to pass? Can I pass both?

Basically, what I really need to do is get the mouse coordinates within the DIV within which the anchor is located (even if that DIV is only a portion of a web page and whether or not the browser is full-screen) and I'm having a terrible time getting it done. Most of the examples I have seen for getting these coordinates within some element use the event and the pageX and pageY properties of that event.

By the way, this must work in IE 6 onward. Firefox would be good, too. Others are not necessary.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

Yes, in the inline code this refers to the HTML DOM object for the element, and event refers to the event object. So you could do the following:


<a onmouseover='SetTopLeft(event, this);' href='#'>Click me!</a>


function SetTopLeft(e, obj) {...}
share|improve this answer
So one can pass 1) neither, 2) the element, or 3) both event and element? Are those always the 3 options? –  birdus Jun 24 '12 at 21:27
Four options: Neither, only the element, only the event, or both. They're both available in the inline code. How many of them you pass to the function, and in what order, is up to you. –  Matt Coughlin Jun 24 '12 at 21:28
I think I see: CallingMethod(), CallingMethod(event), CallingMethod(this), and then CallingMethod(event, this) or CallingMethod(this, event). I assume putting "event" first is the convention since that's what you showed. Thanks! –  birdus Jun 24 '12 at 21:33
Actually I put it in that order to imitate your code :-) Not sure if there's a convention offhand. Certainly you have the option to order them either way. –  Matt Coughlin Jun 24 '12 at 21:37
add comment

In general you should avoid using inline event handlers. It mixes representation (HTML) with logic (JavaScript). quirksmode.org offers a nice collection of articles of all there is to know about event handling.

Since inside an event handler, this typically refers to element the handler is bound to, you can also explicitly set this to the element and pass the event object as first argument:

<a onmouseover='SetTopLeft.call(this, event);'href='#'>Click me!</a>

See .call() [MDN] for more information.

Besides that, if your link is not linking to anything, better use a simple span element or a button and style it accordingly.

share|improve this answer
Thanks for the tip! I'll read up on it. –  birdus Jun 24 '12 at 22:48
If you use a span for functionality like this, be sure to add tabindex=0 so folks who navigate with the keyboard can focus the element. –  steveax Jun 24 '12 at 22:49
What do you think ? –  gdoron Jun 24 '12 at 22:50
add comment

Your Answer


