Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2007-12-05
5
Medium Priority
?
4,686 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

661 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