Script tag vs external script

I've got some simple code inside a script tag in the body of my html doc which executes flawlessly:

<script type="text/javascript">
var anchor = document.getElementById("anchor");

function showCopy(e){
    copyDiv.innerHTML = "this is the new copy!"
}

function addEvent(obj, evt, fn, capture){
    if (onload.attachEvent){
        obj.attachEvent("on" + evt, fn);
    }
    else{
        if (!capture) capture = false;
        obj.addEventListener(evt, fn, capture);
    }
}
addEvent(anchor, "click", showCopy);
</script>

However, when I move it to an external js file – I get in the console: "TypeError: Result of expression 'onload' [null] is not an object."

If I attempt to load the addEvent function with a window.onload handler:

addOnload(addEvent);


function addOnload(newFunction){
  var oldOnload = window.onload;

  if (typeof oldOnload == "function") {
    window.onload = function(){
        if (oldOnload){
 开发者_如何学JAVA           oldOnload();
        }
        newFunction();
    }
  }
  else{
    window.onload = newFunction;
  }
}

"obj" and "obj.addEventListener" throw TypeErrors in console. Can anyone explain why it works in the script tag, but doesn't in the linked file?

---

There's no significant difference in terms of how the code gets executed between this:

<script>
function foo() {
}
foo();
</script>

and this

<script src="foo.js"></script>

...where foo.js contains

function foo() {
}
foo();

So if you have code that works in the first case and not in the second, the most likely explanation is that you have the script elements in different places in the page. Remember that script is executed inline with the document parsing, and so it matters whether the script is above or below the content to which it refers. (If the script is just setting up a handler that will get called later, and the handler refers to elements that don't exist yet, that's fine as long as they exist by the time the handler is executed.)

---

There is a slight difference between inline script and script loaded from an external file (other than the obvious bit that the file has to be downloaded), which is that in the case of the external file the browser isn't reading through the script looking for the end of the script tag, which is a good thing if the actual characters </script> appear in your script (for instance, in a string literal you're going to use at some point — that's why you'll see it written <\/script> sometimes, because the backslash makes no difference to JavaScript but the string no longer matches what the browser's looking for). But that's a reason code would not work in line when it does work in an external file, rather than the other way 'round.

---

When you put it in the < body > does it come before or after the element anchor? The issue is that when you include the script file, the DOM hasn't loaded yet, and anchor will be undefined. Options are to include the script file after anchor, or better yet after or do something like this (externally):

myload = function(){
  var anchor = document.getElementById("anchor");

  function showCopy(e){
    copyDiv.innerHTML = "this is the new copy!"
  }

  function addEvent(obj, evt, fn, capture){
    if (onload.attachEvent){
        obj.attachEvent("on" + evt, fn);
    }
    else{
        if (!capture) capture = false;
        obj.addEventListener(evt, fn, capture);
    }
  };
  addEvent(anchor, "click", showCopy);
};
window.onload = myload;