Другими словами, действие браузера по приостановке интерпретации и выполнения фрагмента кода при возникновении ошибки выполняется на уровне тега или на глобальном уровне?
Это зависит.
Синтаксические ошибки означают, что весь скрипт, загруженный данным тегом script
, не будет работать, поскольку код не может быть проанализирован.
Ошибки времени выполнения только означает, что все, что происходило, когда произошла ошибка, будет прервано (если оно не обработало ошибку).Но только задание, которое активно выполнялось при возникновении ошибки, прекращается;другой код, загруженный этим же тегом script
, продолжит работать.
Пример: в этом коде есть синтаксическая ошибка, поэтому ни один из кодов не работает:
document.getElementById("btn").addEventListener("click", function() {
console.log("Clicked");
}, false);
// This is the syntax error:
if
Clicking this button doesn't do anything:
<br><input type="button" id="btn" value="Click me">
При этом возникает ошибка runtime между подключением первого обработчика события и подключением второго.Как следствие, второй обработчик никогда не подключается, но первый продолжает работать:
document.getElementById("btn1").addEventListener("click", function() {
console.log("Button 1 clicked");
}, false);
// This is the runtime error:
null.foo();
document.getElementById("btn2").addEventListener("click", function() {
console.log("Button 2 clicked");
}, false);
<div>Clicking this button works:</div>
<input type="button" id="btn1" value="Button 1">
<div>Clicking this button doesn't do anything:</div>
<input type="button" id="btn2" value="Button 2">
В обоих случаях это влияет только на код, загруженный этим элементом script
, потому что выполнение этого задания;запуск содержимого любого последующего элемента script
является новым заданием.Таким образом, кнопки первая и третья здесь работают, а вторая - нет, потому что третья подключена отдельным заданием:
<div>Clicking this button works:</div>
<input type="button" id="btn1" value="Button 1">
<div>Clicking this button doesn't do anything:</div>
<input type="button" id="btn2" value="Button 2">
<div>Clicking this button works:</div>
<input type="button" id="btn3" value="Button 3">
<script>
// First job
document.getElementById("btn1").addEventListener("click", function() {
console.log("Button 1 clicked");
}, false);
// This is the runtime error:
null.foo();
document.getElementById("btn2").addEventListener("click", function() {
console.log("Button 2 clicked");
}, false);
</script>
<script>
// Second job
document.getElementById("btn3").addEventListener("click", function() {
console.log("Button 3 clicked");
}, false);
</script>
Конечно, если последующие script
опирались на что-то в более ранних script
, которые не работали, ну, это не будет работать правильно - нокод будет (пытаться) работать.