Question

请原谅新手问题，但我在我的html文档正文中的脚本标记内部有一些简单的代码，执行完美：

<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

当你把它放在＆lt;身体＆gt;它是在元素锚之前还是之后？问题是，当您包含脚本文件时，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>

...其中foo.js包含

function foo() {
}
foo();

因此，如果您的代码在第一种情况下工作而不在第二种情况下工作，最可能的解释是您在页面的不同位置有script个元素。请记住，脚本在文档解析时执行 inline ，因此脚本是在其引用的内容之上还是之下都很重要。（如果脚本只是设置一个稍后会被调用的处理程序，并且处理程序引用了尚不存在的元素，只要它们在处理程序执行时存在就没问题。）

内联脚本和从外部文件加载的脚本（除了文件必须下载的明显位置之外）之间存在细微差别，这是外部文件浏览器无法读取的情况脚本寻找脚本标记的结尾，如果实际字符</script>在脚本中出现，这是一件好事（例如，在您要使用的字符串文字中）在某些时候 - 这就是为什么你有时会看到它写成<\/script>的原因，因为反斜杠对JavaScript没有任何影响，但是字符串不再与浏览器所寻找的相匹配）。但是，当在外部文件中工作时，代码不能工作的原因，而不是相反的方式。

脚本标记与外部脚本

2 个答案: