Problem with "this" keyword in event handler of body element

S

szimek

Hi,

I've got this very simple code:

<body onclick="foo(event, this)">

Inside foo method in IE "this" is body object, but in FF it's window
object - at least that's what MS Script Editor and Firebug are saying.
Any ideas why it works like that?
 
S

szimek

Hi,

I've got this very simple code:

<body onclick="foo(event, this)">

Inside foo method in IE "this" is body object, but in FF it's window
object - at least that's what MS Script Editor and Firebug are saying.
Any ideas why it works like that?

I've posted it too soon. Basically it really sucks:

"Attaching a function using addEventListener() changes the value of
this--note that the value of this is passed to a function from the
caller."
"If the onclick handler is added in the HTML source then value of this
when called from the onclick event will be a reference to the global
(window) object."
http://developer.mozilla.org/en/docs/DOM:element.addEventListener

Why does it work like that?! I'm rewritting IE-only app that has
inline javascript everywhere thus "this" element is wrong in almost
every event handler...

2 questions
- is there a different way than using addEventHandler() to modify FF
behavior to make "this" actual element instead of window object?
- if I'm forced to use addEventHandler - where to put this code so the
event handlers will be registered when the page (dom only?) is loaded?

Thanks in advance for any suggestions
 
R

RobG

What does your foo declaration look like? It should be something like:

function foo(e, el) {...}


Where "e" will be a reference to the event object and el will be a
reference to the object referenced by the this keyword in the caller,
which will be the body element in all browsers I know of.

I'll guess that you have something like:

function foo(event, this) {...}

or maybe:

function foo() {
// do stuff with event
// do stuff with this
}

both of which are not going to work the way you want in browsers
compliant with the W3C DOM level 2 such as Firefox and others.

I've posted it too soon. Basically it really sucks:

"Attaching a function using addEventListener() changes the value of
this--note that the value of this is passed to a function from the
caller."
"If the onclick handler is added in the HTML source then value of this
when called from the onclick event will be a reference to the global
(window)
object."http://developer.mozilla.org/en/docs/DOM:element.addEventListener

You've taken that completely out of context. Read the example again, it
is quite different to what you posted.

Why does it work like that?! I'm rewritting IE-only app that has
inline javascript everywhere thus "this" element is wrong in almost
every event handler...

I think you have misunderstood what is going on.

2 questions
- is there a different way than using addEventHandler()

I think you mean addEventListener... :)
to modify FF
behavior to make "this" actual element instead of window object?

Use it like this:

<script type="text/javascript">
function foo(e, el) {
// e is a reference to the event object
// el is a reference to the element that called the function
}
</script>
- if I'm forced to use addEventHandler

You aren't. There are more issues using addEventListener/attachEvent
than using in-line code.
 
S

szimek

szimek wrote:

 >
 > > Hi,
 >
 > > I've got this very simple code:
 >
 > > <body onclick="foo(event, this)">
 >
 > > Inside foo method in IE "this" is body object, but in FF it's window
 > > object - at least that's what MS Script Editor and Firebug are saying.
 > > Any ideas why it works like that?

What does your foo declaration look like?  It should be something like:

function foo(e, el) {...}

Where "e" will be a reference to the event object and el will be a
reference to the object referenced by the this keyword in the caller,
which will be the body element in all browsers I know of.

I'll guess that you have something like:

function foo(event, this) {...}

or maybe:

function foo() {
   // do stuff with event
   // do stuff with this

}

both of which are not going to work the way you want in browsers
compliant with the W3C DOM level 2 such as Firefox and others.

 > I've posted it too soon. Basically it really sucks:
 >
 > "Attaching a function using addEventListener() changes the value of
 > this--note that the value of this is passed to a function from the
 > caller."
 > "If the onclick handler is added in the HTML source then value of this
 > when called from the onclick event will be a reference to the global
 > (window)
object."http://developer.mozilla.org/en/docs/DOM:element.addEventListener

You've taken that completely out of context.  Read the example again, it
is quite different to what you posted.

 > Why does it work like that?! I'm rewritting IE-only app that has
 > inline javascript everywhere thus "this" element is wrong in almost
 > every event handler...

I think you have misunderstood what is going on.

 > 2 questions
 > - is there a different way than using addEventHandler()

I think you mean addEventListener... :)

 > to modify FF
 > behavior to make "this" actual element instead of window object?

Use it like this:

   <script type="text/javascript">
     function foo(e, el) {
       // e is a reference to the event object
       // el is a reference to the element that called the function
     }
   </script>
   <body onclick="foo(event, this);">...</body>

 > - if I'm forced to use addEventHandler

You aren't.  There are more issues using addEventListener/attachEvent
than using in-line code.

--
Rob
  "We shall not cease from exploration, and the end of all our
   exploring will be to arrive where we started and know the
   place for the first time." -- T. S. Eliot

Thanks for answering so fast. Yeah I made few mistakes in my previous
post :)

The reason why I don't understand it, is that my function declaration
looks like this:
<body onclick='page_onclick(event, this);' ...>
function page_onclick(e, ctrlInst) {
// ctrlInst is window in FF
// ctrlInst is body in IE
}
I have no idea why it works like this.
 
S

szimek

Thanks for answering so fast. Yeah I made few mistakes in my previous
post :)

The reason why I don't understand it, is that my function declaration
looks like this:
<body onclick='page_onclick(event, this);' ...>
function page_onclick(e, ctrlInst) {
  // ctrlInst is window in FF
  // ctrlInst is body in IE}

I have no idea why it works like this.

I wrote this simple test page:
<html>
<body onclick="foo(this);">
<h1 onclick="foo(this);">Test</h1>
<script>
function foo(element) {
alert(element.tagName);
}
</script>
</body>
</html>

I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
correctly when clicking on the header and "undefined" (window object)
when clicking on the body. IE and Opera 9.23 work correctly giving
"BODY" in the second case. Is it supposed to work like this or is it
some long standing FF bug?
 
R

RobG

szimek said:
[...]

I wrote this simple test page:
<html>
<body onclick="foo(this);">
<h1 onclick="foo(this);">Test</h1>
<script>
function foo(element) {
alert(element.tagName);
}
</script>
</body>
</html>

I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
correctly when clicking on the header and "undefined" (window object)
when clicking on the body. IE and Opera 9.23 work correctly giving
"BODY" in the second case. Is it supposed to work like this or is it
some long standing FF bug?

Weird, I don't remember coming across that before, it seems like a bug
in Firefox to me. I'll check Bugzilla later if I have time.
 
D

dhtml

szimek said:
Hi,
I've got this very simple code:
<body onclick="foo(event, this)">
Inside foo method in IE "this" is body object, but in FF it's window
object - at least that's what MS Script Editor and Firebug are saying.
[...]

I wrote this simple test page:
<html>
<body onclick="foo(this);">
<h1 onclick="foo(this);">Test</h1>
<script>
function foo(element) {
alert(element.tagName);
}
</script>
</body>
</html>
I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
correctly when clicking on the header and "undefined" (window object)
when clicking on the body. IE and Opera 9.23 work correctly giving
"BODY" in the second case. Is it supposed to work like this or is it
some long standing FF bug?

Weird, I don't remember coming across that before, it seems like a bug
in Firefox to me. I'll check Bugzilla later if I have time.
It is a bug. I could not find a bug rep't.
 
R

RobG

szimek said:
Hi,
I've got this very simple code:
<body onclick="foo(event, this)">
Inside foo method in IE "this" is body object, but in FF it's window
object - at least that's what MS Script Editor and Firebug are saying. [...]
I wrote this simple test page:
<html>
<body onclick="foo(this);">
<h1 onclick="foo(this);">Test</h1>
<script>
function foo(element) {
alert(element.tagName);
}
</script>
</body>
</html>
I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
correctly when clicking on the header and "undefined" (window object)
when clicking on the body. IE and Opera 9.23 work correctly giving
"BODY" in the second case. Is it supposed to work like this or is it
some long standing FF bug?
Weird, I don't remember coming across that before, it seems like a bug
in Firefox to me. I'll check Bugzilla later if I have time.

It is a bug. I could not find a bug rep't.

szimek seems to have reported it in Bugzilla ID #417080. I gave it a
vote. :)
 
W

wilq

Thanks for answering so fast. Yeah I made few mistakes in my previous
post :)

The reason why I don't understand it, is that my function declaration
looks like this:
<body onclick='page_onclick(event, this);' ...>
function page_onclick(e, ctrlInst) {
  // ctrlInst is window in FF
  // ctrlInst is body in IE}

I have no idea why it works like this.- Hide quoted text -

- Show quoted text -

I might be wrong, but a "event" is defined in IE (or in FF - i dont
remember exacly) and like the "this" gives something other than
onclick event. Try to put there instead something like
page_onclick(e,this). Second thing as i remember it might be bug from
old Netscape architecture where main item was window, and in IE was
document.body. Correct me if I am wrong please:))
 
V

VK

szimek wrote:
Hi,
I've got this very simple code:
<body onclick="foo(event, this)">
Inside foo method in IE "this" is body object, but in FF it's window
object - at least that's what MS Script Editor and Firebug are saying.
[...]
I wrote this simple test page:
<html>
<body onclick="foo(this);">
<h1 onclick="foo(this);">Test</h1>
<script>
function foo(element) {
alert(element.tagName);
}
</script>
</body>
</html>
I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
correctly when clicking on the header and "undefined" (window object)
when clicking on the body. IE and Opera 9.23 work correctly giving
"BODY" in the second case. Is it supposed to work like this or is it
some long standing FF bug?
Weird, I don't remember coming across that before, it seems like a bug
in Firefox to me. I'll check Bugzilla later if I have time.
It is a bug. I could not find a bug rep't.

szimek seems to have reported it in Bugzilla ID #417080. I gave it a
vote. :)

I left my comment with the explanation of the phenomenon and voted NO.
I believe Gecko behavior is fully consistent here with DOM 0.
 
R

RobG

I left my comment with the explanation of the phenomenon and voted NO.
I believe Gecko behavior is fully consistent here with DOM 0.

I think your logic is flawed, DOM 0 is not a specifictation, your
reference to the onload attribute is a red herring. The body element
is not the window object.

The body element is defined in the HTML specification, it has an
onclick attribute as do most other elements. Its behaviour in the DOM
should be implemented exactly the same way as it is implemented on all
other elements that have it, and as all other 'on' events are
implemented.
 
T

Thomas 'PointedEars' Lahn

VK said:
I left my comment with the explanation of the phenomenon and voted NO.

You have not even understood that it is not possible to vote NO on Bugzilla.
I believe Gecko behavior is fully consistent here with DOM 0.

I agree with RobG here, see my comment.


PointedEars
 
T

Thomas 'PointedEars' Lahn

RobG said:
I think your logic is flawed, DOM 0 is not a specifictation, your
reference to the onload attribute is a red herring.

He ridiculously referred to the `onload' *property*, _not_ attribute.

Otherwise, full ACK.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,049
Latest member
Allen00Reed

Latest Threads

Top