why is this window here
fxn
Flanagan's book on this, I've narrowed my misunderstanding to this
self-contained example:
<html>
<head>
<script type="text/javascript" charset="utf-8">
function test_this() {
var foo = document.getElementById("foo");
foo.onkeypress = function () { alert_this(); }
}
function alert_this() {
alert(this);
}
</script>
</head>
<body onload="test_this()">
Foo: <input type="text" id="foo">
</body>
</html>
The alert says this is window, why? And how would you program that so
that you get the textfield in alert_this?
-- fxn
Martin Honnen
> The alert says this is window, why? And how would you program that so
> that you get the textfield in alert_this?
foo.onkeypress = function (evt) {
alert_this(this);
};
function alert_this (object) {
alert(object);
}
--
Martin Honnen
http://JavaScript.FAQTs.com/
fxn
Thank you, but Flanagan's on section "17.1.5 Event Handlers and the
this Keyword" (p. 396), says:
"When your event handler is invoked, it is invoked as a method of the
element on which the event occurred, so the this keyword refers to
that target element."
And the relevant examples there use closures without arguments, and
event handlers that act on this. That does not coincide with the code
you suggest. I would like to get the facts right, can you explain why
that (apparently) doesn't apply to my example and your code is the
correct way to program that?
-- fxn
Martin Honnen
> Thank you, but Flanagan's on section "17.1.5 Event Handlers and the
> this Keyword" (p. 396), says:
>
> "When your event handler is invoked, it is invoked as a method of the
> element on which the event occurred, so the this keyword refers to
> that target element."
>
> And the relevant examples there use closures without arguments, and
> event handlers that act on this. That does not coincide with the code
> you suggest. I would like to get the facts right, can you explain why
> that (apparently) doesn't apply to my example and your code is the
> correct way to program that?
If you want to assign your function as the event handler then do so,
like this:
foo.onkeypress = alert_this;
In that case you will have the this object as you want it. But if you do
foo.onkeypress = function () {
alert_this;
}
then the event handler is the anonymous function created with function
() { ... } and not your alert_this function. That is only called by the
event handler.
fxn
Oh I see!
So inside the very closure this is the target just fine (INPUT in the
example), but that this is not inherited by the functions called from
the handler. Lesson learned, thank you!
-- fxn