Question

在网页中，何时开始运行JavaScript？例如，

HTML section 1
Javascript section 1
Event handler routine 1
HTML section 2
Javascript section 2
Event handler routune 2

此运行顺序是否正确？

网页加载完成
图像文件加载完成
JavaScript第1节开始并完成执行
JavaScript第2节开始并完成执行
事件处理程序例程从事件开始

在JavaScript第2部分完成之前，将不会运行任何事件处理程序例程吗？

Answer 1

否，js是在定义的位置执行的-因此在以下示例中，您无法在之前定义的js脚本中使用第2 html（id ='sec2'）节中定义的div（您会看到错误））。但是，如果您使用html-inline事件处理程序，则可以使用在html元素定义之后定义的js函数

<body>

<div id='sec1' onclick="show('sec1')">HTML section 1 (click me)</div>

<script>
  console.log('Javascript section 1');
  console.log('sec1 html:', sec1);
  console.log('sec2 html:', sec2);
</script>

<div id='sec2' onclick="show('sec2')"> HTML section 2 (click me)</div>

<script>
  console.log('Javascript section 2');
  console.log('sec1 html:', sec1);
  console.log('sec2 html:', sec2);

  function show(msg) { alert(msg) };
</script>

</body>

Answer 2

在网页中，何时开始运行JavaScript？

好吧，这取决于javascript的编写位置。一旦下载（从文件中），或者如果是html内联，浏览器就会立即执行。

如果您的JavaScript位于诸如window.onload或$（document）.load（...）之类的事件中，则将在呈现页面后执行。

事件处理程序是作为对事件的响应而执行的。因此，这里没有特定的顺序。事件一发生，事件处理程序就会被触发。

请考虑以下示例。

<html>
<body>
  <h1 id="first">
    First
  </h1>

  <script type="text/javascript" lazyload>
    var first = document.getElementById('first'); // logs element
    var second = document.getElementById('second'); //logs null

    console.log(first);
    console.log(second);
  </script>

  <h1 id="second">
    Second
  </h1>

  <script type="text/javascript" lazyload>
    var first = document.getElementById('first'); //logs element
    var second = document.getElementById('second'); //logs element

    console.log(first);
    console.log(second);
  </script>
</body>
</html>

上面的示例演示了#first是在执行js块1之前呈现的，但是#second尚未呈现。

HTML页面中的JavaScript代码运行顺序

2 个答案: