this.property doesn't work in IE?

Discussion in 'Javascript' started by nick, Sep 30, 2004.

  1. nick

    nick Guest

    I have the following code:

    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?
     
    nick, Sep 30, 2004
    #1
    1. Advertising

  2. nick

    Ryan Stewart Guest

    "nick" <> wrote in message
    news:cjhs7v$9mh$...
    > I have the following code:
    >
    > 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?
    >


    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
     
    Ryan Stewart, Sep 30, 2004
    #2
    1. Advertising

  3. On Thu, 30 Sep 2004 17:02:31 -0400, nick <>
    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.
     
    Michael Winter, Sep 30, 2004
    #3
  4. nick

    nick Guest

    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.
    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)...

    ----- Original Message -----
    From: "Michael Winter" <>
    Newsgroups: comp.lang.javascript
    Sent: Thursday, September 30, 2004 5:23 PM
    Subject: Re: this.property doesn't work in IE?


    > On Thu, 30 Sep 2004 17:02:31 -0400, nick <>
    > 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, Oct 1, 2004
    #4
  5. nick wrote:
    > 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.
     
    Richard Cornford, Oct 1, 2004
    #5
  6. nick

    nick Guest

    > 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.

    Yes, you are right, in fact the Mozilla assign this.text the anchor's inner
    Text.
    Also, i will try to assign the attribute alt the value so I can use this.alt
    in the event handler for onclick.

    >
    >> 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, Oct 1, 2004
    #6
  7. On Thu, 30 Sep 2004 16:16:42 -0500, Ryan Stewart <>
    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.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Oct 1, 2004
    #7
  8. Richard Cornford wrote:

    > 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.
     
    Thomas 'PointedEars' Lahn, Oct 17, 2004
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andreas Klemt
    Replies:
    0
    Views:
    393
    Andreas Klemt
    Jul 8, 2003
  2. Aaron Ackerman
    Replies:
    1
    Views:
    1,897
    Ken Cox [Microsoft MVP]
    Jan 31, 2004
  3. crispy
    Replies:
    11
    Views:
    12,527
    crispy
    Dec 13, 2003
  4. MZ
    Replies:
    7
    Views:
    851
    Ed Mullen
    Mar 17, 2008
  5. GrumpyDev

    WRAP property in DataGrid doesn't work in IE

    GrumpyDev, Sep 12, 2003, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    153
    GrumpyDev
    Sep 12, 2003
Loading...

Share This Page