What does "this" refer to in an HTML anchor

Question

I am trying to do something in JavaScript before following the link in the href part of a link:

<a href="open.this.page" onclick="doStuff(this);return false; title="follow me">

Question is what does this in doSuff(this) refer to? I was expecting to have to get the href part of the anchor out of it, but when examining it looks like it IS the href and nothing else.

function doSutff(my_arg) {
   alert (my_arg);
   // do stuff
   // follow the href in the link
}

In the above alert I get exactly the href as "http://my.domain/open.this.page".

Is this expected or am I getting it in one browser, but probably not in another?

If that is the normal behavior then how would one get, for example, the rel or title part of an anchor? DOM only?

possible duplicate of [What does "this" mean?](http://stackoverflow.com/questions/4195970/what-does-this-mean) — Mr. Alien, Dec 12 '12 at 15:22
@Mr.Alien — It isn't. This question has a specific context. — Quentin, Dec 12 '12 at 15:23

score 4 · Answer 1 · answered Dec 12 '12 at 15:21

4

In this case this refers to the DOM node.

answered Dec 12 '12 at 15:21

user1894004

116
2

score 3 · Answer 2 · answered Dec 12 '12 at 15:21

3

this in the context of any event (onclick or otherwise) refers to the DOM element that triggered the event.

In your case, it is the anchor tag itself.

answered Dec 12 '12 at 15:21

Matthew Cox

12,918
9
49
71

*"`this` in the context of any event...refers to the DOM element..."* Provided you don't use Microsoft's old `attachEvent` function. But yes, in the OP's case (DOM0 handler), with `addEventListener`, with most libraries, and even `element.onclick = ...`, `this` will be the element. :-) – T.J. Crowder Dec 12 '12 at 15:28

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

"in the above alert I get exactly the href as "http://my.domain/open.this.page".

Is this expected or am I getting it in one browser, but probably not in another?"

This is expected. The reason you get "http://my.domain/open.this.page" in the alert is that that is what the default .toString() value is of an <a> element.

It's an unusual case. Other elements don't show an attribute as the .toString() representation.

If you want to actually do work with the href, you'd need to do this.toString(), or see below...

"...how would one get, for example, the REL or TITLE part of an anchor?"

To get other attributes or properties, you'd just do it the usual ways.

To get the attribute, you can do:

onclick="doStuff(this.getAttribute('title')); return false;"

Most of the standard attributes map directly to a property on the node, so you could also do this:

onclick="doStuff(this.title); return false;"

Or since you're in an inline handler, you can actually do this:

onclick="doStuff(title); return false;"

The reason that last one works is that handlers assigned from an attribute have a unique scope chain that includes the element itself. This means that properties on the element actually show up as variables.

Note that this doesn't work for any other kind of event handler.

With regard to this, it refers to the element to which the handler is bound.

What happens to the attribute is that it basically becomes the body of a function assigned to the onclick property.

So you end up with something like this:

elem.onclick = function(event) {
    doStuff(this);return false; // Your onclick attribute value
}

So you can see that this is actually just the normal value found in an event handler assigned to a property.

Notice also that there's an event parameter defined. This means that you could change your attribute like this:

onclick="doStuff(this, event);return false;"

...and it will pass on that parameter, because now your function looks like this:

elem.onclick = function(event) {
    doStuff(this, event);return false; // Your onclick attribute value
}

So you can see that your string is actually referencing the normal event parameter of the function.

This also works in older IE. In IE, the event parameter won't be defined, so it'll pick up the global event object.

      // ---------------v----no parameter
elem.onclick = function() {

                //   v---now it picks up the global event
    doStuff(this, event);return false; // Your onclick attribute value
}

What does "this" refer to in an HTML anchor

3 Answers3