了解 JavaScript 的运行方式和时间来设计网页

使用 JavaScript 设计网页需要注意代码出现的顺序以及是否将代码封装到函数或对象中，所有这些都会影响代码运行的顺序。

JavaScript 网页上的位置

由于页面上的 JavaScript 基于某些因素执行，让我们考虑在何处以及如何将 JavaScript 添加到网页。基本上我们可以在三个位置附加 JavaScript：

直接进入页面头部

直接进入页面正文

从事件处理程序/侦听器

JavaScript 是在网页本身还是在链接到页面的外部文件中没有任何区别。 事件处理程序是硬编码到页面中还是由 JavaScript 本身添加也无关紧要（除非它们在添加之前不能被触发）。

1. 直接在页面上编码

说 JavaScript 直接在页面的头部或正文中是什么意思？如果代码没有包含在函数或对象中，则直接在页面中。在这种情况下，只要包含代码的文件已加载到足以访问该代码，代码就会按顺序运行。

函数或对象中的代码仅在调用该函数或对象时运行。基本上，这意味着页面头部和正文中任何不在函数或对象内的代码都将在页面加载时运行——只要页面加载到足以访问该代码的程度。

最后一点很重要，它会影响你在页面上放置代码的顺序：任何直接放置在页面中且需要与页面中的元素交互的代码都必须出现在它所依赖的页面中的元素之后。一般来说，这意味着如果你使用直接代码与页面内容进行交互，则此类代码应放在正文的底部。

函数和对象中的代码

每当调用该函数或对象时，就会运行函数或对象中的代码。如果它是从直接位于页面头部或正文中的代码调用的，那么它在执行顺序中的位置实际上就是从直接代码调用函数或对象的点。

2. 分配给事件处理程序和侦听器的代码

将函数分配给事件处理程序或侦听器不会导致函数在分配时运行 - 前提是你实际上是在分配函数本身而不是运行函数并分配返回的值。 （这就是为什么在将函数分配给事件时通常看不到函数名称末尾的 ()，因为添加括号会运行函数并分配返回的值，而不是分配函数本身。）

附加到事件处理程序和侦听器的函数在它们附加到的事件被触发时运行。 大多数事件是由与你的页面交互的访问者触发的。 但是，存在一些例外情况，例如窗口本身的 load 事件，该事件在页面完成加载时触发。

附加到页面元素事件的函数

任何附加到页面本身元素上的事件的函数都将根据每个访问者的操作运行 - 此代码仅在发生特定事件以触发它时运行。 出于这个原因，代码是否永远不会为给定的访问者运行并不重要，因为该访问者显然没有执行需要它的交互。

当然，所有这一切都假设你的访问者使用启用了JavaScript的浏览器访问了你的页面。

3. 自定义访客用户脚本

一些用户安装了可能与你的网页交互的特殊脚本。这些脚本在你的所有直接代码之后运行，但在附加到加载事件处理程序的任何代码之前运行。

由于你的页面对这些用户脚本一无所知，因此你无法知道这些外部脚本可能会做什么 - 它们可以覆盖你附加到你分配处理的各种事件的任何或所有代码。如果此代码覆盖事件处理程序或侦听器，则对事件触发器的响应将运行用户定义的代码，而不是运行你的代码，或者除了运行你的代码之外。

这里的要点是，你不能假设设计为在页面加载后运行的代码将被允许按照你设计的方式运行。此外，请注意，某些浏览器具有允许在浏览器中禁用某些事件处理程序的选项，在这种情况下，相关事件触发器将不会在你的代码中启动相应的事件处理程序/侦听器。