Event/object in JavaScript function

Question

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.

Matt Coughlin · Accepted Answer · 2012-06-24 21:24:02Z

4

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:

HTML

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

JavaScript

function SetTopLeft(e, obj) {...}

answered Jun 24, 2012 at 21:24

Matt Coughlin

18.9k3 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

birdus Over a year ago

So one can pass 1) neither, 2) the element, or 3) both event and element? Are those always the 3 options?

Matt Coughlin Over a year ago

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.

birdus Over a year ago

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!

Matt Coughlin Over a year ago

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.

Felix Kling · Accepted Answer · 2012-06-24 21:57:29Z

3

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.

answered Jun 24, 2012 at 21:57

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

1 Comment

steveax Over a year ago

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.

Collectives™ on Stack Overflow

Event/object in JavaScript function

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related