By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,714 Members | 1,182 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,714 IT Pros & Developers. It's quick & easy.

what is the difference?

P: n/a

Hello everybody,

I need your advice on this. In my javascript I'm using two anchor <A>
which both are to download a pdf file. That works fine but my question
is why the "this" parameter in calling function detects different HTML
elements?!

for the first one (below) it sees it as <IMGbut the second one is
seen as <AWhy?

Here is the html code:

<a href="http://www.website.com/products/aPdfFile.pdf"
onclick="javascript:afunc(event, this);">

<img border="0" src="http://www.websitecom/products/xyz.gif"
width="148" height="55" style="border: 1px solid #99CCFF; padding:
1px">
</a>
<a href="http://www.website.com/products/aPDF_file.pdf"
onclick="javascript:afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
Thanks in advance,
Amit

Jul 23 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
amit wrote:
Hello everybody,

I need your advice on this. In my javascript I'm using two anchor <A>
which both are to download a pdf file. That works fine but my question
is why the "this" parameter in calling function detects different HTML
elements?!

for the first one (below) it sees it as <IMGbut the second one is
seen as <AWhy?
For me, it doesn't.

Here is the html code:

<a href="http://www.website.com/products/aPdfFile.pdf"
onclick="javascript:afunc(event, this);">
Do not use 'javascript:' in event handlers - it shouldn't cause a
problem, but it's bad practice. Lasse Reichstein Nielsen's post here
explains:

<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/519fa89cdf90ac14/97976d9dfd5669c8?lnk=gst&q=%22javascript%3A%22+pse udo+protocol+VBscript&rnum=1#97976d9dfd5669c8>

<img border="0" src="http://www.websitecom/products/xyz.gif"
width="148" height="55" style="border: 1px solid #99CCFF; padding:
1px">
</a>
<a href="http://www.website.com/products/aPDF_file.pdf"
onclick="javascript:afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
In both the above cases, 'this' passes a reference to the A element as
expected in Firefox and IE at least (and should hold for any other
browser that conforms to the specification). What are you doing in
'afunc()' that might change that? Test below:

<script type="text/javascript">
function afunc(e, el){
alert(el.nodeName);
}
</script>
<a href="#"
onclick="afunc(event, this);">
<img border="0"
src="http://groups.google.com/groups/img/groups_medium.gif"
width="148" height="55"
style="border: 1px solid #99CCFF; padding:1px">
</a>

<a href="#"
onclick="afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
--
Rob

Jul 23 '06 #2

P: n/a

RobG wrote:
amit wrote:
Hello everybody,

I need your advice on this. In my javascript I'm using two anchor <A>
which both are to download a pdf file. That works fine but my question
is why the "this" parameter in calling function detects different HTML
elements?!

for the first one (below) it sees it as <IMGbut the second one is
seen as <AWhy?

For me, it doesn't.

Here is the html code:

<a href="http://www.website.com/products/aPdfFile.pdf"
onclick="javascript:afunc(event, this);">

Do not use 'javascript:' in event handlers - it shouldn't cause a
problem, but it's bad practice. Lasse Reichstein Nielsen's post here
explains:

<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/519fa89cdf90ac14/97976d9dfd5669c8?lnk=gst&q=%22javascript%3A%22+pse udo+protocol+VBscript&rnum=1#97976d9dfd5669c8>

<img border="0" src="http://www.websitecom/products/xyz.gif"
width="148" height="55" style="border: 1px solid #99CCFF; padding:
1px">
</a>
<a href="http://www.website.com/products/aPDF_file.pdf"
onclick="javascript:afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>

In both the above cases, 'this' passes a reference to the A element as
expected in Firefox and IE at least (and should hold for any other
browser that conforms to the specification). What are you doing in
'afunc()' that might change that? Test below:

<script type="text/javascript">
function afunc(e, el){
alert(el.nodeName);
}
</script>
<a href="#"
onclick="afunc(event, this);">
<img border="0"
src="http://groups.google.com/groups/img/groups_medium.gif"
width="148" height="55"
style="border: 1px solid #99CCFF; padding:1px">
</a>

<a href="#"
onclick="afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
--
Rob
Thanks Rob,

I've a function which is like below, for the first link it shows that
it is image and for the 2nd one it considers it as anchor.
afunc( e, cur_page)
{

if (!e)
var e = window.event

if (e.target)
targ = e.target;
else if (e.srcElement) //Causing tag element event
targ = e.srcElement;
var tname; // will hold the element i.e. A or IMG here
tname = targ.tagName;
//Monitoring Elements in switch block. {Only two are considered
at time being}
switch(tname)
{
case "IMG":
tag = cur_page.toString();

break;
case "A":
tag = cur_page.href;
break;
}

}
any suggestions?

thanks!

Jul 23 '06 #3

P: n/a
amit wrote:
RobG wrote:
amit wrote:
Hello everybody,
>
I need your advice on this. In my javascript I'm using two anchor <A>
which both are to download a pdf file. That works fine but my question
is why the "this" parameter in calling function detects different HTML
elements?!
>
for the first one (below) it sees it as <IMGbut the second one is
seen as <AWhy?
For me, it doesn't.

Here is the html code:
>
<a href="http://www.website.com/products/aPdfFile.pdf"
onclick="javascript:afunc(event, this);">
Do not use 'javascript:' in event handlers - it shouldn't cause a
problem, but it's bad practice. Lasse Reichstein Nielsen's post here
explains:

<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/519fa89cdf90ac14/97976d9dfd5669c8?lnk=gst&q=%22javascript%3A%22+pse udo+protocol+VBscript&rnum=1#97976d9dfd5669c8>

<img border="0" src="http://www.websitecom/products/xyz.gif"
width="148" height="55" style="border: 1px solid #99CCFF; padding:
1px">
</a>
>
>
<a href="http://www.website.com/products/aPDF_file.pdf"
onclick="javascript:afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
In both the above cases, 'this' passes a reference to the A element as
expected in Firefox and IE at least (and should hold for any other
browser that conforms to the specification). What are you doing in
'afunc()' that might change that? Test below:

<script type="text/javascript">
function afunc(e, el){
alert(el.nodeName);
}
</script>
<a href="#"
onclick="afunc(event, this);">
<img border="0"
src="http://groups.google.com/groups/img/groups_medium.gif"
width="148" height="55"
style="border: 1px solid #99CCFF; padding:1px">
</a>

<a href="#"
onclick="afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
--
Rob

Thanks Rob,

I've a function which is like below, for the first link it shows that
it is image and for the 2nd one it considers it as anchor.
afunc( e, cur_page)
{

if (!e)
var e = window.event
There is no need for that. In your onclick handler, 'event' will refer
to the HTML element's event object in Gecko-based (and probably all W3C
conforming) browsers and window.event in those that use IE's event
model.[1]

if (e.target)
targ = e.target;
else if (e.srcElement) //Causing tag element event
targ = e.srcElement;
That is the source of your problem - it is normally abbreviated to:

var targ = e.target || e.srcElement;
'targ' is now a reference to the element that was clicked on, not the
one that fired the onclick handler (remember that events bubble upward
in all browsers and also downward in W3C conforming browsers).

<URL:http://www.quirksmode.org/js/events_order.html>
You pass 'this' to the parameter cur_page so that will reference the
element whose onclick called the function - in the case of the A with
an IMG child element, 'this' will reference the A since it calls the
function, targ will reference the IMG since that is what was clicked on
(the click on the IMG bubbles up to the A to fire the handler).

var tname; // will hold the element i.e. A or IMG here
tname = targ.tagName;
//Monitoring Elements in switch block. {Only two are considered
at time being}
switch(tname)
{
case "IMG":
It is suggested that all tag names be converted to lower case and
tested as such, so above you should use (supposing you fix the
reference to targ or cur_page as appropriate):

var tname = targ.tagName.toLowerCase();

and then:

case "img":
Some will suggest using a series of if..else statements rather than
switch - I have no opion on that though. :-)

[...]

1. Gecko-based browsers provide an 'event' object for each element as
part of its augmented scope chain. In those browsers, 'event' refers
to the element's event object. IE does it differently, it provides a
global event object. Regardless, a reference to 'event' in an onclick
handler will either get the element's event object or in IE, a search
up the scope chain for 'event' will ultimately find 'window.event'. So
in both cases, the use of 'event' in the onclick handler will get a
reference to the appropriate event object.

In IE you can call window.event nearly anywhere and get something back
(whether it's the right 'something' or not is moot), in Gecko-based
browsers you can't, you need to specify the DOM object that actually
fired the event (a reference to which is returned by the 'this'
property of the function that was called by the onclick).

I hope that makes sense.
--
Rob

Jul 24 '06 #4

P: n/a

RobG wrote:
amit wrote:
RobG wrote:
amit wrote:
Hello everybody,

I need your advice on this. In my javascript I'm using two anchor <A>
which both are to download a pdf file. That works fine but my question
is why the "this" parameter in calling function detects different HTML
elements?!

for the first one (below) it sees it as <IMGbut the second one is
seen as <AWhy?
>
For me, it doesn't.
>
>
Here is the html code:

<a href="http://www.website.com/products/aPdfFile.pdf"
onclick="javascript:afunc(event, this);">
>
Do not use 'javascript:' in event handlers - it shouldn't cause a
problem, but it's bad practice. Lasse Reichstein Nielsen's post here
explains:
>
<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/519fa89cdf90ac14/97976d9dfd5669c8?lnk=gst&q=%22javascript%3A%22+pse udo+protocol+VBscript&rnum=1#97976d9dfd5669c8>
>
>
<img border="0" src="http://www.websitecom/products/xyz.gif"
width="148" height="55" style="border: 1px solid #99CCFF; padding:
1px">
</a>


<a href="http://www.website.com/products/aPDF_file.pdf"
onclick="javascript:afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
>
In both the above cases, 'this' passes a reference to the A element as
expected in Firefox and IE at least (and should hold for any other
browser that conforms to the specification). What are you doing in
'afunc()' that might change that? Test below:
>
<script type="text/javascript">
function afunc(e, el){
alert(el.nodeName);
}
</script>
<a href="#"
onclick="afunc(event, this);">
<img border="0"
src="http://groups.google.com/groups/img/groups_medium.gif"
width="148" height="55"
style="border: 1px solid #99CCFF; padding:1px">
</a>
>
<a href="#"
onclick="afunc(event, this );">(OnClick only) Download the
PDF file (aPdfFile.pdf)</a>
>
>
--
Rob
Thanks Rob,

I've a function which is like below, for the first link it shows that
it is image and for the 2nd one it considers it as anchor.
afunc( e, cur_page)
{

if (!e)
var e = window.event

There is no need for that. In your onclick handler, 'event' will refer
to the HTML element's event object in Gecko-based (and probably all W3C
conforming) browsers and window.event in those that use IE's event
model.[1]

if (e.target)
targ = e.target;
else if (e.srcElement) //Causing tag element event
targ = e.srcElement;

That is the source of your problem - it is normally abbreviated to:

var targ = e.target || e.srcElement;
'targ' is now a reference to the element that was clicked on, not the
one that fired the onclick handler (remember that events bubble upward
in all browsers and also downward in W3C conforming browsers).

<URL:http://www.quirksmode.org/js/events_order.html>
You pass 'this' to the parameter cur_page so that will reference the
element whose onclick called the function - in the case of the A with
an IMG child element, 'this' will reference the A since it calls the
function, targ will reference the IMG since that is what was clicked on
(the click on the IMG bubbles up to the A to fire the handler).

var tname; // will hold the element i.e. A or IMG here
tname = targ.tagName;
//Monitoring Elements in switch block. {Only two are considered
at time being}
switch(tname)
{
case "IMG":

It is suggested that all tag names be converted to lower case and
tested as such, so above you should use (supposing you fix the
reference to targ or cur_page as appropriate):

var tname = targ.tagName.toLowerCase();

and then:

case "img":
Some will suggest using a series of if..else statements rather than
switch - I have no opion on that though. :-)

[...]

1. Gecko-based browsers provide an 'event' object for each element as
part of its augmented scope chain. In those browsers, 'event' refers
to the element's event object. IE does it differently, it provides a
global event object. Regardless, a reference to 'event' in an onclick
handler will either get the element's event object or in IE, a search
up the scope chain for 'event' will ultimately find 'window.event'. So
in both cases, the use of 'event' in the onclick handler will get a
reference to the appropriate event object.

In IE you can call window.event nearly anywhere and get something back
(whether it's the right 'something' or not is moot), in Gecko-based
browsers you can't, you need to specify the DOM object that actually
fired the event (a reference to which is returned by the 'this'
property of the function that was called by the onclick).

I hope that makes sense.
--
Rob


Rob Thanks!

I'm still trying to digest all those things you said but about targ
that you said as main problem:

if (e.target)
targ = e.target;
else if (e.srcElement) //Causing tag element event
targ = e.srcElement;

did you mean that I have to take it off ? or replace it with its
equalent?

var targ = e.target || e.srcElement;

Amit

Jul 24 '06 #5

P: n/a

amit wrote:
[...]
>
Rob Thanks!

I'm still trying to digest all those things you said but about targ
that you said as main problem:

if (e.target)
targ = e.target;
else if (e.srcElement) //Causing tag element event
targ = e.srcElement;

did you mean that I have to take it off ? or replace it with its
equalent?
Remove it, I just suggested the shorthand method in case you want to
use it elsewhere.
>From your handler you pass 'this' and 'event':
<a ... onclick="afunc(event, this);" ...>

Here, 'this' refers to the A element, always; 'event' refers to the
event object associated with the click event that fires the onclick
handler.

Despite the different implementations of the event object and different
event models in browsers, in the code above 'event' will refer to the
event object associated with the click event that causes afunc() to be
called.

In afunc() you have:

function afunc(e, cur_page){ ... }

So the value of 'event' (which is a reference to the event object) is
assigned to 'e', and the value of 'this' (which is a reference to the A
element) to 'cur_page'. Therefore e is a reference to the click event
that called the onclick handler, and cur_page to the element that the
handler was on.

A click on the IMG element causes a click event to bubble up the parent
element chain above the IMG, firing any 'onclick' handler it finds on
the way.

When the click event gets to the A, it sees an onclick handler and
fires it. If you put one on a higher element, say the body, you'll get
that to fire every time you click anywhere on the page. This
'bubbling' is how events work.

The event object has a reference to the element that caused the event -
which is frequently a different element to the one whose event handler
is called. In your code, a click on the IMG element causes a click
event to bubble up and fire the A element's onclick handler.

Anyhow, in the W3C event model, the property that refers to the element
that originally fired the event is called 'target' and in IE it is
'srcElement', hence where 'e' is a reference to an event object:

var targ = e.target || e.srcElement; // [1]

Sets the value of 'targ' to a reference to the element that was clicked
on (i.e. targ refers to the IMG element that was clicked on, not the A
element whose onclick handler called the function).

You may want to read more about events at Quirksmode, read this and
subsuquent pages:

<URL:http://www.quirksmode.org/js/introevents.html>
Expect to take some time to come to grips with it.
1. This is shorthand for:
var targ;
if ('undefined' != typeof e.target){
targ = e.target;
} else if ('undefined' != typeof e.srcElement){
targ = e.srcElement;
}
--
Rob

Jul 24 '06 #6

P: n/a

RobG wrote:
amit wrote:
[...]

Rob Thanks!

I'm still trying to digest all those things you said but about targ
that you said as main problem:

if (e.target)
targ = e.target;
else if (e.srcElement) //Causing tag element event
targ = e.srcElement;

did you mean that I have to take it off ? or replace it with its
equalent?

Remove it, I just suggested the shorthand method in case you want to
use it elsewhere.
From your handler you pass 'this' and 'event':

<a ... onclick="afunc(event, this);" ...>

Here, 'this' refers to the A element, always; 'event' refers to the
event object associated with the click event that fires the onclick
handler.

Despite the different implementations of the event object and different
event models in browsers, in the code above 'event' will refer to the
event object associated with the click event that causes afunc() to be
called.

In afunc() you have:

function afunc(e, cur_page){ ... }

So the value of 'event' (which is a reference to the event object) is
assigned to 'e', and the value of 'this' (which is a reference to the A
element) to 'cur_page'. Therefore e is a reference to the click event
that called the onclick handler, and cur_page to the element that the
handler was on.

A click on the IMG element causes a click event to bubble up the parent
element chain above the IMG, firing any 'onclick' handler it finds on
the way.

When the click event gets to the A, it sees an onclick handler and
fires it. If you put one on a higher element, say the body, you'll get
that to fire every time you click anywhere on the page. This
'bubbling' is how events work.

The event object has a reference to the element that caused the event -
which is frequently a different element to the one whose event handler
is called. In your code, a click on the IMG element causes a click
event to bubble up and fire the A element's onclick handler.

Anyhow, in the W3C event model, the property that refers to the element
that originally fired the event is called 'target' and in IE it is
'srcElement', hence where 'e' is a reference to an event object:

var targ = e.target || e.srcElement; // [1]

Sets the value of 'targ' to a reference to the element that was clicked
on (i.e. targ refers to the IMG element that was clicked on, not the A
element whose onclick handler called the function).

You may want to read more about events at Quirksmode, read this and
subsuquent pages:

<URL:http://www.quirksmode.org/js/introevents.html>
Expect to take some time to come to grips with it.
1. This is shorthand for:
var targ;
if ('undefined' != typeof e.target){
targ = e.target;
} else if ('undefined' != typeof e.srcElement){
targ = e.srcElement;
}
--
Rob
Rob,

Thank you! I was kind of confused about the event mechanism. Once again
thanks for your patience and explaining it in details.

Amit

Jul 24 '06 #7

P: n/a
"RobG" <rg***@iinet.net.auwrites:
1. Gecko-based browsers provide an 'event' object for each element as
part of its augmented scope chain.
It's not so much the element as the event handler that is provided the
event object.
If you assign an event handler, the first parameter will be the event
object when the handler is invoked. It doesn't have to be called "event":

fooElem.onclick = function (myEvent) { /* ... no "event" in scope */ }
In those browsers, 'event' refers to the element's event object.
In intrinsic event handlers specified in HTML, the event object is
given the default name "event" when the code is executed. How
this is handled is seen by the example:

<div onclick="alert(this.onclick);">X</div>

In Firefox clicking on the X alerts:
function onclick(event) {
alert(this.onclick);
}

In IE it alerts:
function anonymous()
{
alert(this.onclick);
}
IE does it differently, it provides a global event object.
Regardless, a reference to 'event' in an onclick handler will either
get the element's event object or in IE, a search up the scope chain
for 'event' will ultimately find 'window.event'. So in both cases,
the use of 'event' in the onclick handler will get a reference to
the appropriate event object.
That is true for intrinsic event handlers. For programmatically
assigned handlers there are the following ways:
W3C Events:
event object is parameter
IE set with attachEvent:
event object is parameter and global variable (but "this"
does not refer to the element)
IE directly assigned to "onclick" attributes (or intrinsic handlers):
no event passed, but available as global variable.

In IE you can call window.event nearly anywhere and get something back
(whether it's the right 'something' or not is moot)
It'll always be the event that triggered the execution of the current
code.
in Gecko-based browsers you can't, you need to specify the DOM
object that actually fired the event (a reference to which is
returned by the 'this' property of the function that was called by
the onclick).
That won't help you get an event. The event is not attached to the
element in any way.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 24 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.