SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event handling trouble, 'this' or 'e'?

    I thought I'd put an 'onclick' event on all the h3's in my page. But I'm running into trouble with the event handling side of things.

    First I 'registered' the event like this:
    Code:
    var i, h;
    for (i=0; h = document.getElementsByTagName('H3')[i]; i++) {
        h.onclick = doIt;
    }
    And then I tried to 'handle' it like this:
    Code:
    function doIt(e){
        if (typeof e == 'undefined') {var e = window.event};
        alert(e.nodeName);
    }
    But instead of the expected 'H3', that alert shows me 'undefined' (when I click on any of those h3's).

    Then I tried this:
    Code:
    function doIt(){
        alert(this.nodeName);
    }
    And it works! I get 'H3' as expected, and I can access its parentNode, childNodes etc as advertised!

    So my question is why? What is the difference? When should I use one and when the other?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  2. #2
    SitePoint Member
    Join Date
    Oct 2003
    Location
    USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to work with event, you would need to get the target, like so, for example:
    Code:
    e.tgt = e.srcElement? e.srcElement: e.target;
    The target for some browsers (mozilla, for example) may be a text node. So you might want to check the parent element, like so:
    Code:
    if (e.tgt.nodeType && e.tgt.nodeType == 3) e.tgt = e.tgt.parentNode;
    Then check e.tgt.nodeName or e.tgt.tagName or e.tgt.id or whatever you wanted to find out about the target of the click event.

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the subject of whether to work with this or event, I think it just depends on what your function needs in order to perform its task. For your example, I think this probably makes more sense. The target of a click event may be quite far removed from the object to which the event handler was assigned. (If a h3 contained a span or link, for example.)

  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks uneverno.

    I've tried that out and yes, it's like you said, the target that I got was an A tag which is nested in the H3. So I guess I'm better of with 'this' for this.

    In what case would one be using event then? What is the difference between 'this' and 'event'? What is their definition? What do they do? I was reading about event bubling and all that and I was under the impression that if an event happens on a node (say a click) it will buble up to the first event that has a handler registered for this event. So why am I getting the 'A' tag and not the H3 tag?

    Sorry if I'm going on a bit but this thing has been bugging me for 2 full days now, and I need to understand these differences.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  5. #5
    SitePoint Member
    Join Date
    Oct 2003
    Location
    USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This refers to the object to which the event handler was assigned. So you can get this.id or this.tagName or this.parentNode, etc. inside the function assigned to that object's event handler property.

    Event provides a means to obtain information about the event, like its target (or srcElement for IE). For mouse events there are various properties that tell you the location of the event. event.clientX, event.offsetX, event.pageX, ... Through event you can find out which mouse button was clicked, which key was pressed, where the mouse was moving from and to for mouseover and mouseout events, ... The event.type property tells you whether the event was "click" or "mouseover" or "keydown" or "mousedown" ...

    Have you seen brainjar's event tutorial at http://www.brainjar.com/dhtml/events/default.asp ?

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate!

    I think it's clear now. If one just needs the owner of the event it's easier to just use 'this'. And 'event' offers more possibilities if one needs them.

    I hadn't read that article btw. I have now! It's the best explenation of event handling that I've come across so far.

    Thanks again!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •