this.property doesn't work in IE?
nick
var ocevent = function(v)
{
alert('u clicked '+v);
return false;
};
var items = {
"002.jpg": {text:"002", href:"#", click:function(){return
ocevent(this.text)} },
"003.jpg": {text:"003", href:"#", click:function(){return
ocevent(this.text)} },
...}
And I use the following code to assign the click property to onclick of
anchor.
a.onclick = items[id].click;
However, the code works well in Mozilla Firefox. But it doesn't work in IE.
The alert shows 'v' is undefined in IE.
http://greywolfdesign.com/tmp/gallery/gallery.htm
Any suggestion?
Ryan Stewart
news:cjhs7v$9mh$1...@news3.bu.edu...
I'm not entirely clear on the use of "this" in JS, this site has some
interesting pointers:
http://www.quirksmode.org/js/this.html
Michael Winter
wrote:
[snip]
> [...] the code works well in Mozilla Firefox. But it doesn't work in IE.
> The alert shows 'v' is undefined in IE.
What are you expecting this.text to access?
In event listeners, the this operator references the current target of the
event. In your code, that would be the A elements. If you expect it to
access the text property within your items object, I'm afraid it won't.
[snip]
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
nick
var items = {
"002.jpg": {text:"002", href:"#", click:function(){return
ocevent(this.text)} },
the object "{text:"002", href:"#", click:function(){return
ocevent(this.text)}" has a property of text ("002"), a method/function click
and others, and the function is attached to the onclick event of an anchor.
So when the event was triggered, then Object.click is called and this.text
should be "002" in the above example. Looks Mozilla handle it this way.
But it is undefined in IE... guess in IE, the function is "unbinded" from
the object...
Any workaround?... (don't want to feed the function a contant string "002"
again)...
Richard Cornford
> I thought in the defination:
> var items = {
> "002.jpg": {text:"002", href:"#", click:function(){return
> ocevent(this.text)} },
> ...}
>
> the object "{text:"002", href:"#", click:function(){return
> ocevent(this.text)}" has a property of text ("002"), a
> method/function click and others, and the function is attached to the
> onclick event of an anchor.
In javascript a function is a function object, any number of objects
might refer to the same function. The - this - keyword is determined by
how that function is called. If you call the function as:-
items['002.jpg'].click();
- this - will refer to the object with members "text" and "click", and
if you call it as:-
(items['002.jpg'].click)();
- this - will be the global object as - (items['002.jpg']click) -
resolves as a reference to a function so it is called without any
associations with an object. But you are assigning a reference to the
function object to an event handler, making it a method of the element
when it is called, so - this - becomes a reference to that element.
> So when the event was triggered, then Object.click
> is called and this.text should be "002" in the above
> example. Looks Mozilla handle it this way.
Mozilla pribably is not handling it that way (as it would be wrong for
it to do so).
> But it is undefined in IE... guess in IE, the function
> is "unbinded" from the object...
Mazola A elements have "text" properties, while IE's don't.
> Any workaround?... (don't want to feed the function a contant string
> "002" again)...
As each anonymous function expression evaluated results in a new
function object being created I don't see any reason for not creating
the function objects with the string in the form of a literal:-
var items = {
"002.jpg": function(){return ocevent("002")},
"003.jpg": function(){return ocevent("003")},
...
}
- indeed it seems simpler to do that than construct lots of objects with
properties (assuming you don't need the text outside of the functions.
There are lots of other ways of association objects and data with
functions (may using closures).
> ----- Original Message -----
> From: "Michael Winter" ...
<snip>
Top posting to comp.lang.javascript will get you ignored, please don't
do it (see the FAQ).
Richard.
nick
> it to do so).
>
>> But it is undefined in IE... guess in IE, the function
>> is "unbinded" from the object...
>
> Mazola A elements have "text" properties, while IE's don't.
Text.
Also, i will try to assign the attribute alt the value so I can use this.alt
in the event handler for onclick.
Michael Winter
wrote:
[snip]
> I'm not entirely clear on the use of "this" in JS [...]
Whenever code is executed, it is given an execution context. This context
holds the scope chain, used to resolve properties, and local variables.
Each context has a this value associated with it. The actual value depends
upon the code that will be executed and how it is executed.
There are three types of code: global, eval, and function code.
Global code, that which doesn't exist within a function block or eval
call, has a this value that refers to the global (window) object.
alert(this == window); // true
Eval code, that which is defined by a call to eval, takes the this value
of the context in which it's executed. So at a global level, code executed
in an eval call will have a this value that refers to the global object.
Eval code executed within a function will use the same reference as that
function.
alert(eval('this == window')); // true;
var obj = {
member : function() {
alert(eval('this == obj')); // true;
}
};
With function code, the this value is provided by the caller. In normal
circumstances, the this value refers to the object of which the function
is member. The second eval example demonstrates this indirectly. The
function, member, is a method of the object, obj. When called with
obj.member(), the this operator will refer to obj. However, there are
three cases there things may not occur as described or expected.
1) When the call method is used.
The call method allows the caller to explicitly specify the value to be
used for the this operator, overriding the default.
2) Global functions.
This case doesn't exhibit any strange behaviour as long as you're aware
that global functions, like global variables, are properties of the global
object. As such, the this operator refers to the global object within
global functions.
3) Inner functions.
In something like
var obj = {
member : function() {
function inner() {
alert(this == obj); // false!
}
alert(this == obj); // true
}
};
you might expect the inner function to share the this reference of its
outer function. However, this is not the case.
When a function is called and a new execution context is created, a
variable/activation object is created. This object holds the local
variables and inner functions of the called function, and is the first
object checked in the scope chain. When the activation object is required
to provide a this value, such as when an inner function is called, it
supplies a reference to the global object.
So, what do you use the this operator for? Everything you use it for in
languages such as C++ and Java, namely to refer to the "current" object.
The biggest example is with intrinsic events. When a listener is
associated with a HTML element, it effectively becomes a property of that
element. When the listener is called, this association causes the this
operator to refer to that element. This makes it much easier to pass a
reference to the element to functions that need it. This also extends to
user-defined objects.
This description might be more overwhelming than enlightening, so please
ask if you have any questions.
Mike
...or if anyone spotted a mistake in my description.
Thomas 'PointedEars' Lahn
> In javascript a function is a function object, any number of objects
> might refer to the same function.
In JavaScript (and ECMAScript implementations) a function is a Function
object, any number of identifiers might refer to the same (Function)
object/function.
PointedEars
--
Stress is when you wake up screaming and you realize you haven't fallen
asleep yet.