Solved

Any difference between onmouseover='src="img1.gif"' and onmouseover='this.src="img1.gif"'

Posted on 2007-12-05
5
4,674 Views
Last Modified: 2008-02-01
I just realized that when I assign a function to an event, I've been randomly using either,
onmouseover='src="img1.gif"'
or
onmouseover='this.src="img1.gif"'

and either of them work just fine

Are there any differences in those two?
I see more people are using this.src=..., are there any problems with just doing src=...

I had posted exactly the same question at http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22981856.html but I mistakenly accepted the solution without testing it. :-(

What Zvonko said in there is not quote true since it still works when I had a global variable named src...
0
Comment
Question by:nagunpyo
5 Comments
 
LVL 9

Expert Comment

by:sognoct
ID: 20410073
In JavaScript this always refers to the owner of the function we're executing, or rather, to the object that a function is a method of. When we define our faithful function doSomething() in a page, its owner is the page, or rather, the window object (or global object) of JavaScript.

read there

http://www.quirksmode.org/js/this.html
0
 
LVL 11

Expert Comment

by:raj3060
ID: 20412109
onmouseover='src="img1.gif"'
or
onmouseover='this.src="img1.gif"'

Both would work if you have focus on the element where you have this script.

onmouseover='this.src="img1.gif" id preferable as you are mentioning what value to take for the object.
0
 
LVL 11

Expert Comment

by:raj3060
ID: 20412114
should be read:

onmouseover='this.src="img1.gif" is preferable
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 20412406
Hi,

I've only had 1 mug of espresso so far, so the following may be somewhat disorganized :)

As you may have noticed, both IE & FF handle "src" & "this.src" in the same manner because of the reason stated by sognoct (above).  Essentially, 'this' relates to whatever you are referring.  In your case, 'this' refers to the mousedover's image source.  Since javascript assumes 'this', there is no functional difference.

Wat Zvonko said about global variables & naming conventions is true (but not fully explained). If you have two variables with the same name (whether one is a keyword or not) and one is declared global & the other local, you will not always end up with the results expected.
   Local variables lose their scope (die/cease to exist) when they leave the function; global variables retain their values until explicitly changed.
  Older browsers tended to confuse keywords & variable names under certain conditions, which made the usage of 'this' popular.
0
 
LVL 16

Accepted Solution

by:
LeeKowalkowski earned 500 total points
ID: 20613553
this.src and src are only equivalent on elements that have a src property, otherwise this.src will set the property on the element and src will set the property on the window object.

For instance:

<img onmouseover="foo='bar';" onmouseout="alert(this.foo);" ... >

- doesn't work because foo is assigned to the window object, not the img element.

And:

<img onmouseover="this.foo='bar';" onmouseout="alert(foo);" ... >

- does work! (not tested *every* browser though)

I think it's better practice to be explicit and always use 'this' in event handlers, to avoid accidental scope-leak at least.

--
Lee
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question