JavaScript Targets and the this Reference

Tuesday, December 26, 2006

4 comments

I've been catching up on JavaScript basics recently.

Here is a simple example to demonstrate the difference between the event target (where an event takes place), and the this reference (where an event handler is defined).

Consider the following hunk of HTML:

<div id="List">

    <ul>

        <li> One </li>

        <li> Two </li>

        <li> Three </li>

    </ul>

</div>

We could write an event handler like so:

<script type="text/javascript">

  window.onload = function()

  {

      List.onclick =  List_onclick;

  }

  function List_onclick(e) 

  {

      var evt = e || window.event;

      var evtTarget = evt.target || evt.srcElement;

      alert(evtTarget.nodeName);

      alert(this.nodeName);

  }          

</script>

Clicking on one of the list items will reveal that evtTarget references an LI element, while this references the DIV element. I like this style, but for various reasons we often wire event handlers like so:

<div id="List" onclick="return List_onclick()">

    <ul>

        <li>One </li>

        <li>Two </li>

        <li>Three </li>

    </ul>

</div>

And the script, which doesn't change a great deal:

<script type="text/javascript" >

    function List_onclick(e) 

    {

        var evt = e || window.event;

        var evtTarget = evt.target || evt.srcElement;

        alert(evtTarget.nodeName);

        alert(this.nodeName);

        return false;

    }

</script>

Clicking in a list item will show us that the evtTarget is still an LI element, but this.nodeName will now show as undefined. The function List_onclick in the second example is part of the global object, which doesn't have a nodeName.

I always have to think about what this will reference in JavaScript, which is one reason the language makes me queasy.

Comments

Milan Negovan Tuesday, December 26, 2006

Yep, in JavaScript, what 'this' points to an any given time is tricky. Here's a short, helpful post from Jonathan Snook on this subject: snook.ca/archives/javascript/is_this_overrated/

Jason Diamond Tuesday, December 26, 2006

When use the "onclick" attribute, "this" does refer to the element inside the "onclick" attribute. I've seen a lot of code that passes "this" in to the handler, but I prefer the style in your first example and don't use attributes like "onclick" if I can avoid it.

I've written about how tricky "this" can be in the context of ASP.NET AJAX over on my weblog.

jason.diamond.name/weblog/2006/12/10/not-delegates

Rick Strahl Wednesday, December 27, 2006

Scott - me too! I've struggled with this for some time as well. I've taken to adding an Instance member to my JavaScript classes (var Instance = this as part of the constructing code) and always passing the instance variable instead of this pointer and that properly keeps the state intact.

Somebody helped me out at the time with a link to an excellent document that I continue to look at from time to time that describes Closures - what makes all of this work (or not work :->) - in great detail.

http://jibbering.com/faq/faq_notes/closures.html

scott Wednesday, December 27, 2006

Thanks for the links, guys. Those are all good resources.

Comments are now closed.

On Twitter

Contact

Search Archives About

OdeToCode by K. Scott Allen

Tweets about "odetocode"