сценарий против внешнего сценария

Question

простите вопрос новичка, но у меня есть простой код внутри тега script в теле моего 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] не является объектом». в консоли. Если я пытаюсь загрузить функцию addEvent с помощью обработчика window.onload:

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 в консоли. Кто-нибудь может объяснить, почему он работает в теге script, а не в связанном файле?

Answer 1

Нет существенной разницы в том, как выполняется код между этим:

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

и этим

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

... где foo.js содержит

function foo() {
}
foo();

Итак, если у вас есть код, который работает в первом случае, а не во втором, наиболее вероятным объяснением является то, что у вас есть элементы script в разных местах на странице.Помните, что сценарий выполняется inline при разборе документа, и поэтому важно, находится ли сценарий выше или ниже содержимого, к которому он относится.(Если скрипт просто устанавливает обработчик, который будет вызываться позже, а обработчик ссылается на элементы, которые еще не существуют, это нормально, если они существуют к моменту выполнения обработчика.)

---

Существует небольшая разница между встроенным сценарием и сценарием, загружаемым из внешнего файла (кроме очевидного бита, который должен быть загружен файл), то есть в случае внешнего файлабраузер не читает скрипт, ища конец тега скрипта, что хорошо, если фактические символы </script> появляются в вашего скрипта (например, в строковом литерале 'в какой-то момент мы будем использовать его - вот почему вы увидите, что иногда оно написано <\/script>, поскольку обратный слеш не имеет значения для JavaScript, но строка больше не соответствует тому, что ищет браузер).Но это причина, по которой код не работает в строке, когда он работает во внешнем файле, а не наоборот '.

Answer 2

Когда вы помещаете его в , оно приходит до или после привязки элемента?Проблема в том, что когда вы включаете файл сценария, 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;