PDA

View Full Version : Using the "this" keyword?

PhotoJoe47
01-03-2006, 04:00 AM
I'm interesting in learning how to use the keyword "this". I want to know all the ins & outs. I have seen a few examples using the keyword but I feel my knowledge is not complete. I have google "javascript keyword this" but did not find anything that was helpful. I have also search a few on-line javascript references, but could not find a list of keywords.

I think you can, with an event handler use "this" to past a current object as an argument to a function. But I'm not quite sure how to pass it and then use it in the function.

Here is some code I was trying to play with.


<html>
<head>
<title>Some text for div 01</title>
<style type="text/css">
div
{
font-family: Comic Sans MS;
font-size: x-small;
font-weight: bold;
background: silver;
color: blue;
}

.bg1{background: lime}
.bg2{background: aqua}

</style>
<script type="text/javascript">
function changebg(something,bg)
{
somthing = bg;
}

</script>

</head>
<body>
<div id="div01">
<a href="#" onMouseOver="changebg(this,'bg2')" onMouseOut="changebg(this,'bg1')">Something</a>
</div>
</body>
</html>



I was trying to get the background color of the text "Something" that is between the opening and closing <a></a> tags.

I would like to learn enough about the keyword "this" to use it with any html element tag and event handler that the tag may have.
glenngv
01-03-2006, 04:07 AM
In your example, the this keyword refers to the current element which is the <a> tag. So the changebg() function now has the reference to that link object. It can access all applicable methods and properties of that reference object.
function changebg(oLink){
alert(oLink.href);
alert(oLink.innerHTML); //Something
}
...
<a href="#" onmouseover="changebg(this)">Something</a>
PhotoJoe47
01-03-2006, 05:31 AM
Thanks glenngv,

I thought I had tried something similar to your code but could not get it to work. I must have had simple syntax error, like quotes in the wrong place etc.


function changebg(test,bg)
{
test.className = bg;
}
......

<a href="#" onMouseOver="changebg(this,'bg2')" onMouseOut="changebg(this,'bg1')">Something</a>


Now I can change the className for the link. So when the mouse is over the link it will have a different background color.

I noticed that you used "oLink" as the name of the argument that contain the link object that was passed to the function. I guess that is a "best practice" using a little o for object and Link for type of object?

Thanks for the help:thumbsup:

In your example, the this keyword refers to the current element which is the <a> tag. So the changebg() function now has the reference to that link object. It can access all applicable methods and properties of that reference object.
function changebg(oLink){
alert(oLink.href);
alert(oLink.innerHTML); //Something
}
...
<a href="#" onmouseover="changebg(this)">Something</a>
glenngv
01-03-2006, 06:33 AM
This may be off topic but you can remove onmouseover/onmouseout event handlers for each link or any element just to change its color. You can do it with just CSS using the :hover and :active pseudo-classes in any element. That works in all modern browsers except IE where it works only in <a> tag. But there's an easy fix (http://www.codingforums.com/showthread.php?t=32369) for that.
PhotoJoe47
01-03-2006, 07:13 AM
Thanks glenngv,

That is cool, as they say. I'm adding that to my growing collection example javascript codes. I starting to get so many examples that I will need to come up with a way to organize them.

Changing the background color was just the first thing I thought of to try and do using the "this" keyword. I know I will be able to use it for a lot of other things.