Help with the 'this' keyword

[Oliver]

Hi everybody,

                      Just a quick question regarding the use of the this keyword in JavaScript, I've tried finding some examples on the internet but there's so much to trawl through covering a topic I don't fully understand that I thought it might be worth my time posting here as well.

 

I'm just looking to ask a quick question to see if I can better understand the use of the this keyword, if I'm completely wrong then please don't hesitate to let me know.

 

So, this is my code:

 

HTML

<div class="threeHunPxBox" onmouseover="colorChange()"><p>Rockets</p></div><div class="threeHunPxBox" onmouseover="colorChange()"><p>Internet</p></div><div class="threeHunPxBox" onmouseover="colorChange()"><p>Technology</p></div>

JavaScript

function colorChange() {    this.style.backgroundColor = "red";}

That code doesn't work, I get the error "Uncaught TypeError: Cannot set property 'backgroundColor' of undefined"

 

I know if I give each div a unique ID I can just use document.getElementById and I could say onmouseover="colorChange(identifierHere)" with a unique identifier for each div but is there any way I could use the 'this' keyword to say "If this is moused over, then change the background color of this" OR is that simply not how it works at all?

 

I ask because there's something that feels unnecessary about adding more ID's just to find the div using JavaScript when I could just as easily say change the properties of 'this' div using the this keyword but I just don't know for sure.

 

Thanks very much for your time,

 

Oliver.

 

EDIT:: I'm aware I can change the backgroundColor in CSS using 

.threeHunPxBox:hover {    background-color : red;   }

I'm just wondering if I could do it in JavaScript, I'm new to the language but I know 

document.getElementById("rocketsBox").style.backgroundColor = "red";

would work, whereas

this.style.backgroundColor = "red";

doesn't, and I'm just trying to work out if it's a simple syntax error that makes all the difference or if I'm just completely wrong in my understand of how the 'this' keyword works. Thanks again.

[kcaze]

Here's a link that talks exactly about this problem: http://www.quirksmode.org/js/this.html

 

Beyond what's mentioned in the article, there is another solution to your problem which is to write

<div id="rocketDiv" class="threeHunPxBox" onmouseover="colorChange.bind(this)()">

[AzraelTycka]

That's because this refers to the owner of the function/method, but in your case you are not assigning your function to your onlick property of your DOM element but just tel it to call it.

 

If you are looking for a simple explanation with examples and how to do it you can just google it, there is exactly your example showed in detail - check it in this link.

 

 

EDIT: Ops, the same link above :-).

[Oliver]

Thank you very much for taking the time to reply, I'd seen a few different pages from Google myself but missed that one. It's still confusing but I understand a lot more about this than I did before I read the quirksmode article. Thanks again.

[AzraelTycka]

Well it's not that much confusing if you thing about it.

 

Javascript is a separate entitiy from DOM, those two are then connected with bridges (that's the image you can work with).

 

this refers to the owner of the function / method, thus var tt.a = fn() {this // refers to tt}; and so on. In your case, you have DOM element DIV which is represented as div object in JS, therefore something like var div = // DOM element -  your div reference object;.

 

Your div object (var div above) has a method onmouseover defined like this:

var div = {} // here is stored reference ot your DOM element - that's the bridge I described abovediv.onmouseover = function() {  // this - refers to div (var above)}; // it does nothing at the beginning because you haven't assigned anything to it.

then in JS you have you function:

function colorChange() {  this.style.backgroundColor = "red";}

and in DOM you do:

<div class="threeHunPxBox" onmouseover="colorChange()"><p>Rockets</p></div>

Which is same in javascript as just calling the function - but you are not assigning it to anything there is no javascript "=" sign in your onmouseover method currently!

 

Because this is html tag and not JS browser uses a bridge to connect those two in this way: it adds your code to onmouseover method of your reference object, therefore your object gets changed into this:

var div = {} // here is stored reference ot your DOM element - that's the bridge I described abovediv.onmouseover = function() {  colorChange();};

As you can see there is no assignement which says div.onmouseover = colorChange; it just calls your function therefore what is the owner of your colorChange function when you call it like this? Well it can't be div because you didn't assign colorChange to any of it's methods/properties so it has to be something else, the only thing that is currently above it is window as a context for javascript in your html page so the owner has to be it.

 

 

Just compare it with js code I gave you above:

var tt = {};tt.a = function() {  this.addNewPropertyThree = 3;}

Can you see it now? tt.a this refers to tt because function a is a property of tt (thus tt is the owner of a obviously). You could rewrite it like this to make it more similar to your case:

var tt = {};function someFunction() {  this.addNewPropertyThree = 3;}tt.a = someFunction;

In this case it's same as the code above I gave you above where tt.a was defined immediately, this still refers to the owner of the function someFunction() because it was assigned to tt.a as its method.

 

While in your case you do this:

var tt = {};function someFunction() {  this.addNewPropertyThree = 3;}tt.a = function() {  someFunction();}

There is no someFunction assigned to any of tt properties as a method so tt can't be an owner of someFunction thus this can't reffer to tt, therefore your function call someFunction() uses this in window context not in a context of tt object (because it's just a function call of function which belongs to window object - you defined it outside, in javascript everything belongs to something, although you created your function without any var it still has to belong to something - object - in this case it's window object).

 

Is it understandable this way?