脚本标记与外部脚本

Question

请原谅新手的问题，我在html文档主体中的script标记中有一些简单的代码，它可以完美地执行：

<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>

但是，当我将其移动到外部js文件时-我得到"TypeError:表达式'onload‘的结果null不是一个对象“。在控制台中。如果我尝试使用window.onload处理程序加载addEvent函数：

addOnload(addEvent);


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

  if (typeof oldOnload == "function") {
    window.onload = function(){
        if (oldOnload){
            oldOnload();
        }
        newFunction();
    }
  }
  else{
    window.onload = newFunction;
  }
}

"obj“和"obj.addEventListener”在控制台抛出TypeErrors。有没有人能解释为什么它在脚本标签中有效，而在链接文件中却不起作用？

Answer 1

当你把它放在< body >中时，它是在元素锚之前还是之后？问题是，当您包含脚本文件时，DOM尚未加载，并且锚点将是未定义的。选项是在锚点之后包含脚本文件，或者更好地在锚点之后包含脚本文件，或者执行类似以下操作(外部)：

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;

Answer 2

在代码如何执行方面，这两种代码没有显著差异：

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

还有这个

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

...where foo.js包含

function foo() {
}
foo();

因此，如果您的代码在第一种情况下有效，而在第二种情况下不起作用，最可能的解释是您将script元素放在页面中的不同位置。请记住，脚本是在文档解析过程中以内联方式执行的，因此脚本位于它所引用的内容之上还是之下都很重要。(如果脚本只是设置一个稍后将被调用的处理程序，并且该处理程序引用了还不存在的元素，那么只要这些元素在处理程序执行时存在就可以了。)

内联脚本和从外部文件加载的脚本之间有一个细微的区别(除了文件必须下载的明显部分)，在外部文件的情况下，浏览器不会通过脚本读取脚本以查找脚本标记的结尾，这是一件好事，如果实际的字符</script>出现在您的脚本中(例如，在某个时刻将使用的字符串文字中--这就是为什么您有时会看到它写为<\/script>，因为反斜杠对JavaScript没有影响，但是字符串不再与浏览器查找的内容匹配)。但这就是代码在外部文件中不能正常工作的原因，而不是相反的情况。