SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question simply javascript book - basic theory, about event handler, and "this"

    hi forum members!

    i'm just starting with javascript, i need some basic advice please.

    i started reading "simply javascript" - and i'm enjoying it. at around page 135, the book discusses "The Problem with Event Handlers" - and i don't really get the problem.

    it shows a sample code, trying to have two functions fire for an element's "onclick" event handler, as such:

    element.onclick = function()
    {
    script1.clickHandler();
    script2.clickHandler();
    }



    ...and then states that this is bad for the 3 following reasons:

    But all sorts of things are wrong with this approach:
    1) "this" will no longer point to the element within the clickHandler methods.
    2) If either clickHandler method returns false, it will not cancel the default actionfor the event.
    3) Instead of assigning event handlers neatly inside a script’s init method, you
    have to perform these assignments in a separate script, since you have to reference both script1 and script2.



    so....here's what i don't understand:

    what is wrong with doing it this way:

    var myLink =
    {
    init: function()
    {
    var link = document.getElementById("myLinksID");
    link.onclick = myLink.clickHandler;
    },

    clickHandler: function()
    {
    Script1(this);
    Script2(this);
    return false;
    }
    };
    .
    .
    .
    Script1 = function(that)
    { alert(that.href); } //alerts original "this" link href

    Script2 = function(that)
    { alert(that.href); } //alerts original "this" link href
    .
    .
    .



    ...and so, i'm not sure - but it appears to the untrained mind that their issues are addressed, such as:

    1) "this" is passed to next function, which eliminates their first issue.
    2) the "false" is returned at the end of the single function eliminates the 2nd issue
    3) i tried this code and it seems to work ok...so i'm not sure on #3, but i seem to be assigning the handler in the init phase...


    and so now - before i get thoroughly crushed by everyone - i do realize that the book is obviously correct, i just don't get why. i am trying understand the reasoning behind these concepts - and this is the only way i know how to ask, by showing my incorrect thoughts and having the concept explained back to me that way.

    thanks a lot for anyone's kind advice here, i'm looking forward to the lights coming "on" here - thanks
    /tre

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Handler problems

    1. Yes, you could pass 'this' on as an argument to your handler functions. You may also want to pass on the event object that should have been passed into your handler.

    2. The problem with 'return false'.
    You may not want to return false every time, it may depend on results from the multiple functions you are stacking inside your handler. Okay, for the two functions you have you could use 'return Script1(this) && Script2(this)', but as you add in more functions you'll need to come up with a way of deciding whether to return false.

    3. The problem here is that different scripts from different sources may want to use a particular event handler. If two scripts want to use onload, you'll need to write an onload handler that starts off the two scripts or find a way of preventing one onload function from overwriting the other. It is possible, but the scripts themselves have to have made the effort to play nice and not hijack the handler.

    If you then introduce more scripts to the page, you'll have to ammend the onload function or ensure they all get along.

    So, while for simple stand-alone scripts where you know there will be no pollution from other sources you can go ahead and stick with old-style handlers, as things get any more complicated and you start importing scripts you'll need to contrive ways to keep the handlers operating smoothly.

    Rather than contrive workarounds for the problems, why not use the system that's already there? You can add and remove listeners at will. Different scripts can add a listener to onload with no problems.

    When I say no problems ...
    You'll want to use some functions to handle the W3C and IE differences, but just about every JavaScript book has those.


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
  •