why is this window here

fxn · Jun 27, 2007

Coming from the need to chain callbacks dynamically, and following
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 · Jun 27, 2007

fxn said:
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);
}

fxn · Jun 27, 2007

foo.onkeypress = function (evt) {
alert_this(this);
};
function alert_this (object) {
alert(object);
}

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 · Jun 27, 2007

fxn said:
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 · Jun 27, 2007

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.

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

Why is the e.target not working here?	1	Dec 29, 2022
Why doesn't the function get called?	1	Nov 20, 2023
This code is not working	8	Dec 9, 2020
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
What "might" I be doing wrong with this snippet?	6	Sep 25, 2023
Help me sort out this script	1	Oct 17, 2023
Not sure why drop-down is not working.	2	Mar 24, 2024
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021

why is this window here

fxn

Martin Honnen

fxn

Martin Honnen

fxn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads