«

http://www.frostjedi.com/terra/scrip...his-alert.html
http://www.frostjedi.com/terra/scrip...is-alert2.html

Why, when you click in the black box, do the alert boxes say different
things? Shouldn't they say the same thing?

On Thu, 25 Sep 2008 15:45:50 -0700, yawnmoth wrote:

> http://www.frostjedi.com/terra/scrip...his-alert.html
> http://www.frostjedi.com/terra/scrip...is-alert2.html
>
> Why, when you click in the black box, do the alert boxes say different
> things? Shouldn't they say the same thing?

Your problem is here:
<div onclick="test()"> </div>

It is NOT the same as:
<div onclick=test> </div>

The first form runs the "test()" function within the global context. The
Global Object does not have a property called tagName.


The second form (as well as your second example) use a function
reference, and runs within the context of the div.

Understanding the environment the script runs in is essential to
understanding what "this" refers to.

When an intrinsic event attribute is provided for an element (assuming
it is recognised, etc.), such as:-

<div onclick="test()"> </div>

- the browser uses the string value (the "text()" in this case) as the
body text of a function that it creates and assigned to the
corresponding property of the representation of the element in the
DOM. So what the browser does here is the equivalent of:-

divRef.onclick = function(event){
test();
};

(with or without the - event - formal parameter, depending on the
browser)

The difference between the browser doing this and your doing the
equivalent of:-

divRef.onclick = test;

- is that when the browser calls the function it calls the function as
- divRef.onclick(); - (with or without an event object as the
argument, depending on the browser) so the - this - value for the
execution of the function assigned to - divRef.onclick - is a
reference to the DIV element, but the function assigned is different.
One is the function that the browser created (the function that will
then call - test -) and the other is test itself. In the event that
the function called is the one created by the browser then when it
calls - test - it does so in a way that will make the - this - value
inside that call be a reference to the global object.

On Sep 26, 12:43*pm, Henry <rcornf...@raindrop.co.uk> wrote:
> When an intrinsic event attribute is provided for an element (assuming
> it is recognised, etc.), such as:-
>
> <div onclick="test()"> </div>
>
> - the browser uses the string value (the "text()" in this case) as the
> body text of a function that it creates and assigned to the
> corresponding property of the representation of the element in the
> DOM. So what the browser does here is the equivalent of:-
>
> divRef.onclick = function(event){
> * * test();
>
> };
>

Correct me if I'm mistaken, but I think I once read somewhere that it
does an eval() of the text: like (in this case) eval('test()')... ?

--
Jorge.

On Sep 26, 12:44*pm, Jorge wrote:
> On Sep 26, 12:43*pm, Henry wrote:
>
>> When an intrinsic event attribute is provided for an element
>> (assuming it is recognised, etc.), such as:-
>
>> <div onclick="test()"> </div>
>
>> - the browser uses the string value (the "text()" in this case)
>> as the body text of a function that it creates and assigned to
>> the corresponding property of the representation of the element
>> in the DOM. So what the browser does here is the equivalent of:-
>
>> divRef.onclick = function(event){
>> * * test();
>
>> };
>
> Correct me if I'm mistaken, but I think I once read somewhere that
> it does an eval() of the text: like (in this case)
> eval('test()')... ?

I cannot tell whether you are mistaken in thinking that you once read
that somewhere, but it is not the case.

On Sep 25, 6:01*pm, Jeremy J Starcher <r3...@yahoo.com> wrote:
> On Thu, 25 Sep 2008 15:45:50 -0700, yawnmoth wrote:
> >http://www.frostjedi.com/terra/scrip...his-alert.html
> >http://www.frostjedi.com/terra/scrip...is-alert2.html
>
> > Why, when you click in the black box, do the alert boxes say different
> > things? *Shouldn't they say the same thing?
>
> Your problem is here:
> <div onclick="test()"> </div>
>
> It is NOT the same as:
> <div onclick=test> </div>
>
> The first form runs the "test()" function within the global context. *The
> Global Object does not have a property called tagName.
>
> The second form (as well as your second example) use a function
> reference, and runs within the context of the div.
>
> Understanding the environment the script runs in is essential to
> understanding what "this" refers to.

Why, then, don't any of these work?:

http://www.frostjedi.com/terra/scrip...is-alert3.html
http://www.frostjedi.com/terra/scrip...is-alert4.html
http://www.frostjedi.com/terra/scrip...is-alert5.html

I can understand the first one. The first one doesn't, presumably,
work for the same reason that "x=y; y=2;" doesn't result in x equaling
2 - ie. test hasn't been defined and so onclick is set to undefined.

But what about the second and third ones? I tried the third one since
your "It is NOT the same as" didn't include quote marks.

On Sep 26, 1:58*pm, Henry <rcornf...@raindrop.co.uk> wrote:
>
> I cannot tell whether you are mistaken in thinking that you once read
> that somewhere, but it is not the case.



Still, there's something weird here, something that seems to be
against your theory, see:

<html>
<head>
</head>
<body onload= "alert((document.body.onload === arguments.callee)+'\r
\n'+arguments.callee)">
</body>
</html>

how do you explain this ?

--
Jorge.

On Sep 26, 9:58*pm, Jorge <jo...@jorgechamorro.com> wrote:
>
> Still, there's something weird here, something that seems to be
> against your theory, see:
>
> <html>
> <head>
> </head>
> <body onload= "alert((document.body.onload === arguments.callee)+'\r
> \n'+arguments.callee)">
> </body>
> </html>
>
> how do you explain this ?
>

The link: http://jorgechamorro.com/cljs/018/

--
Jorge.

Jorge wrote:
> On Sep 26, 9:58 pm, Jorge <jo...@jorgechamorro.com> wrote:
>> Still, there's something weird here, something that seems to be
>> against your theory, see:
>>
>> <html>
>> <head>
>> </head>
>> <body onload= "alert((document.body.onload === arguments.callee)+'\r
>> \n'+arguments.callee)">
>> </body>
>> </html>
>>
>> how do you explain this ?
>>
>

The body tag's onload attribute is really window onload. window has no
tag, so, somebody (probably in Netscape) once had the idea to make the
body tag the place to put event handlers from window. Now, event
handlers for window and body go in the body tag. It is an idea that
seems to be quite popular, even to this day.

Ian Hickson has stated that there is a benefit to having window event
handlers for body attributes and has included at least one new window
event handler as a body attribute (hashchange). Ian could not comment on
what that benefit was. I still haven't figured it out...

The following thread may help explain some more:
http://lists.whatwg.org/htdig.cgi/wh...er/016184.html

Your example's title says:
<title>
onclick behaves differently when defined via javascript
</title>

But the code has:
<body onload= "alert((document.body.onload ===
^^^^^^

So I think you might got onload mixed up with onclick.

if you would change:
<body onload= "alert(window.onload === arguments.callee)">

Op, FF, Saf (and IE, but I cannot test it).
'true'

Or,
<body onclick= "alert(window.onclick === arguments.callee)">

FF3
"true"

Because of the reasons mentioned in the whatwg thread. In firefox, the
body content handlers all map to window. I don't see this as being
invalid behavior, though it's filed as bug in Firefox.

Also, as mentioned in the whatwg thread, the event handler is really on
the window. You can trigger the event by clicking outside of the body
element (give body style="border: 1px solid" to see this in action).

We can also do one better and see that in firefox, the scope chain is
not augmented by the body element nor document.

<body onclick="alert(typeof getElementsByName)" style="border: 1px solid">

FF3:
undefined

Others:
function (or similar impl dependent string)

As we saw in an earlier thread, event handler attributes get an aug'd
scope chain, but this doesn't happen when window "wins" the event
handler attribute. In Firefox, window "wins" for all mouse events.

An event that applies to both body and window, the handler goes to window:
<body onfocus="alert(typeof getElementsByName)" style="border: 1px
solid" tabindex=1>

Best to avoid using event handler attributes in body.

For other elements, event handler attributes have the augmented scope
chain. To be fair and complete, I should also mention that event
handlers that reference other identifiers need those identifiers in the
document first (to avoid reference errors). This often means that
external script tags have to go in the head, which can slow down page
load. (Though loading strategy is a bit off-topic here). Regardless,
there are other ways of registering callbacks.

Garrett

> The link: http://jorgechamorro.com/cljs/018/
>
> --
> Jorge.

On Sep 26, 8:58 pm, Jorge wrote:
> On Sep 26, 1:58 pm, Henry wrote:
>> I cannot tell whether you are mistaken in thinking that you
>> once read that somewhere, but it is not the case.
>
>
>
> Still, there's something weird here, something that seems to
> be against your theory, see:
>
> <html>
> <head>
> </head>
> <body onload= "alert((document.body.onload === arguments.callee)+'\r
> \n'+arguments.callee)">
> </body>
> </html>
>
> how do you explain this ?

How do I explain what exactly? If you want something explaining it is
generally a good idea to state what that something is, and given the
very inconsistent handling of the 'promotion' of BODY element event
handlers and scope chain augmentation across browsers it would be a
very good idea to state where you are observing whatever it is you
want explaining in addition to what it was you observed.