SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    attachEventListener to body

    Trying to create the crossbrowser eventListener for onload, but the body tag is not there by the time this is executed?

    Any ideas?

    Code JavaScript:
    <script type="text/javascript">
    var browser = "";
    function attachEventListener(target, eventType, functionRef, capture){
        //standards
        if(typeof target.addEventListener != "undefined")
        {
            target.addEventListener(eventType, functionRef, capture);
            browser = "standards";
     
        }else{
            target.attachEvent("on" + eventType, functionRef);
            browser = "non-standards";
        }
    }
    function engage(){
        alert(browser);
    }
     
    var mybody = document.getElementsByTagName("body")[0];
    attachEventListener(mybody, "load", engage, false);
    </script>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you do this:
    Code Javascript:
    var mybody = document.getElementsByTagName("body")[0];
    alert(mybody);
    attachEventListener(mybody, "load", engage, false);
    The alert will say "undefined". That's because you can't use any of the DOM methods like getElementsByTagName until the DOM has loaded, i.e. until the window's onload event has fired.

    When you use the inline event handler in the body tag (onload="func()"), that is actually the same thing as window.onload when you do it unobtrusively. So what you need to do is this:
    Code Javascript:
    attachEventListener(window, "load", engage, false);
    You might want to do it on DOMContentLoaded instead, as it fires before window.onload when the DOM has loaded (but before images and other things have been downloaded).

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You will have success if you activate the script from the body (typically the end of it) than from the head.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That is practically the same as DOMContentLoaded and is only useful if you need whatever the script does to be available before images load. If you're attaching event listeners to things, it can normally wait until window.onload.

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry- double post

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    It is practically the same, except for one point- DOMContentLoaded is only for Mozilla and perhaps Safari, with IE using a different technique.

    Placing the code at the bottom of the body is a much more robust solution that is guaranteed while minimizing the amount of additional code required.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, but my point is that things don't need to happen then, most things can wait until window.onload.

    And BTW, the DOMContentLoaded solution I linked to works in Mozilla, IE, Opera and Safari.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I know it's counter intuitive and goes against the fancy techniques we have been learning, but even window.onload is easily replaced with just running the code from the end of the document. There are very few situations when you will need to wait until the page has completely finished loading before the script should be run.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Surely putting a SCRIPT element in the BODY goes against your Zen principles though?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    When the script is in the head it slows down the whole loading of the page. Everything has to come to a halt until the script is loaded and processed.

    Far better for that to occur at the end of the document when there is something on the screen, rather than waiting for the page to appear.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't think many people will note a rendering time difference of 100ms or however long it takes to download and parse a few Kb of JS.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    It depends on how many scripts they have, and while it may not be compelling enough on it's own, it does help to add weight to the overall argument.
    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
  •