SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM level 0 event handling technique valid?

    Hi,

    Usually (when i'm not using jquery/prototype) i use a function provided by Scott Andrews to handle cross browser events:

    Code JavaScript:
    function addEvent(element, evType, fn, useCapture) {
        if (element.addEventListener) {
            element.addEventListener (evType, fn, useCapture);
            return true;
        } else if (element.attachEvent) {
            var r = element.attachEvent('on' + evType, fn);
            return r;
        } else {
            element['on' + evType] = fn;
        }
    }


    Now this works fine and i usually call addevent to listen for the load event which then calls another funciton in which i have all my other event listeners...like so:

    Code JavaScript:
    //add a listener on page load
    addEvent(window, 'load', addListeners, false);
     
    function addListeners() {
    //all other add event calls here
    }

    Now i have a script containing just a few functions....I only need to call one function that then calls other functions when it needs them. So all i need to do is make sure the
    doc is loaded and then run this function.

    So the addEvent stuff seems like overkill for this...so i'm wondering if I can simply just use this at the top of my script:

    Code JavaScript:
    document.onload = myfunction();

    It seems to work in IE/FF. It's just basic DOM level 0 event handling.

    Am i missing any issue here? Are there any drawbacks with this?

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    why not do

    HTML Code:
    <body onload="myFunction();">
    that'll definitely work.
    R駑on - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    Am i missing any issue here? Are there any drawbacks with this?
    The drawback is that you can only assign one handler per event and element this way. That's usually enough, but for the document load event it's not uncommon that you need multiple listeners. Especially if you use several external scripts that need to work together.

    Of course, you also cannot intercept events in the capture phase.

    Quote Originally Posted by ScallioXTX View Post
    why not do

    HTML Code:
    <body onload="myFunction();">
    that'll definitely work.
    It has the same drawback, mainly. Plus it creates an undesired hard coupling between the content layer (HTML) and the interaction layer (JavaScript), which has a negative effect on maintainability.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah that's not exactly progressive though is it? I try to avoid mixing html/javascript...it's bad practice....also this script currently works nicely in the way that all the user has to do is include the javascript file and add an id in to some html and the scirpt takes care of everythig else...I want to keep it this way

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Am i missing any issue here? Are there any drawbacks with this?
    i'm not sure. i found with some event registration using the element.addEventListener(evType, fn, useCapture) method (in ff and safari, didn't have ie to test in and anyway, it uses a different registration mechnasim) that in some cases, even though the browser did support addEventListener(), the event did not get successfully registered (it was an on submit event http://www.sitepoint.com/forums/showthread.php?t=569003). never got to the bottom of why but using the basic (traditional event registration) method worked -- so what i'm saying is in some cases it seems using the basic method is actually advantageous not just as good as.

    i suspect, and i'm just guessing using a bit of knowledge i have from another oo programming language (i don't know much about js), that the reason addEventListener() is now advocated is for forward compatibility, if that's the right phrase: as browsers develop, code which uses addEventListener will automatically get the advantages of new developments where as you will miss them using the basic method as that bypasses calling a method but just sets a variable. whether there are any such advantages now i have no idea but presumably there may be in the future. again, that was all guessed, maybe completely wrong.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    The drawback is that you can only assign one handler per event and element this way.

    hi, Right...yes i'm aware of this...that's why i'd usually use the addEvent code above...but this time i definately only need one listener for the onload event....so it's ok in this context?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    but this time i definately only need one listener for the onload event....
    Famous last words #19 ...

    Quote Originally Posted by elduderino View Post
    so it's ok in this context?
    Yes, I'd say so.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, Yeah you're probably right, but at this moment I do only need one!

    Thanks


  9. #9
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha, just realized it should have been :

    window.onload = myfunction;

    not:

    window.onload = myfunction();

    It was calling myfunction as soon as the code was parsed instead of waiting for the document to load and then running the function!
    Last edited by elduderino; Sep 24, 2008 at 07:26.

  10. #10
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you using document.onload/window.onload? The only reason you should be using either of those is if you need to have access to seperate page assets such as StyleSheets or images. If all you require is for the DOM to be ready to register events then you should place "addListeners()" at the bottom of the document as recomended by YUI.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  11. #11
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personal preference....both achieve the same thing.....I'm just going with the most common approach...which is placing the script reference in the head of the document and dealing with the loading of the doc in the script. It just seems a bit hacky to move it to the bottom of the page....but again it's personal preference.

    I'd usually use DOM level 2 event handling but in this instance I really only need one listener so the DOM levle 0 approach i'm using works fine.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by elduderino View Post
    It just seems a bit hacky to move it to the bottom of the page....but again it's personal preference.
    Moving scripts to the bottom is one of the best practices for speeding up your web site.

    A positive benefit of moving scripts to the bottom is that the DOM is immediately available from those scripts, so you can perform tasks long before any onload techniques take effect.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •