当您第一次编写一个新的JavaScript时，设置它的最简单方法是将JavaScript代码直接嵌入到web页面中，以便在测试它以使其正常工作时，一切都在一个地方。类似地，如果您正在将预写脚本插入网站，说明可能会告诉您将部分或全部脚本嵌入网页本身。

这对于设置页面并使其在第一时间正常工作来说是可以的，但是一旦您的页面按照您想要的方式工作，您就可以通过将JavaScript提取到外部文件中来改进页面，这样HTML中的页面内容就不会被JavaScript等非内容项弄得如此混乱。

如果您只是复制并使用其他人编写的Java脚本，那么他们关于如何将脚本添加到您的页面的说明可能会导致您将一个或多个较大的JavaScript部分实际嵌入到您的网页中，而他们的说明不会告诉您如何将这些代码从页面移动到一个单独的文件中并保存还有JavaScript的工作。不过不要担心，因为无论页面中使用的JavaScript代码是什么，您都可以轻松地将JavaScript移出页面并将其设置为单独的文件（如果页面中嵌入了多个JavaScript，则可以将其设置为单独的文件）。这样做的过程总是一样的，最好用一个例子来说明。

让我们看看当一段JavaScript嵌入到您的页面中时会是什么样子。您的实际JavaScript代码与以下示例中所示的代码不同，但过程在每种情况下都是相同的。

例一

<script type="text/javascript"> if (top.location != self.location) top.location = self.location; </script>

例二

<script type="text/javascript"><!-- if (top.location != self.location) top.location = self.location; // --> </script>

例三

<script type="text/javascript"> /* <![CDATA[ */ if (top.location != self.location) top.location = self.location; /* ]]> */ </script>

您的嵌入式JavaScript应该类似于上述三个示例之一。当然，您的实际JavaScript代码与显示的代码不同，但是JavaScript可能会使用上述三种方法之一嵌入到页面中。在某些情况下，您的代码可能会使用过时的language=“javascript”而不是type=“text/javascript”，在这种情况下，您可能希望通过将language属性替换为type属性来更新代码。

在将JavaScript提取到自己的文件中之前，首先需要确定要提取的代码。在上述三个示例中，有两行实际的JavaScript代码需要提取。您的脚本可能会有更多的行，但很容易识别，因为它将在页面中占据与我们在上述三个示例中突出显示的两行JavaScript相同的位置（所有三个示例都包含相同的两行JavaScript，只是它们周围的容器略有不同）.

1. 要将JavaScript提取到单独的文件中，首先需要打开纯文本编辑器并访问网页内容。然后，您需要找到嵌入的JavaScript，该JavaScript将被上述示例中所示的一种代码变体所包围。
2. 找到JavaScript代码后，您需要选择它并将其复制到剪贴板。在上面的示例中，将突出显示要选择的代码，您不需要选择可能出现在JavaScript代码周围的脚本标记或可选注释。
3. 打开纯文本编辑器的另一个副本（如果编辑器支持一次打开多个文件，则打开另一个选项卡），并跳过其中的JavaScript内容。
4. 选择用于新文件的描述性文件名，并使用该文件名保存新内容。对于示例代码，脚本的目的是分解框架，因此可以使用framebreak.js作为适当的名称。
5. 现在我们将JavaScript放在一个单独的文件中，我们返回到编辑器，在那里我们有原始页面内容，可以在那里进行更改，以链接到脚本的外部副本。
6. 由于我们现在将脚本放在一个单独的文件中，我们可以删除原始内容中脚本标记之间的所有内容，以便</script&；脚本标记紧跟在标记后面。
7. 最后一步是向脚本标记添加一个额外的属性，标识可以在何处找到外部JavaScript。我们使用src=“filename”属性来实现这一点。在我们的示例脚本中，我们将指定src=“framebreak.js”。
8. 唯一复杂的是，如果我们决定将外部Java脚本存储在与使用它们的网页不同的文件夹中。如果执行此操作，则需要在文件名前面添加从网页文件夹到JavaScript文件夹的路径。例如，如果Java脚本存储在保存网页的文件夹中的js文件夹中，我们需要src=“js/framebreak.js”

那么，在我们将JavaScript分离成一个单独的文件之后，我们的代码是什么样子的呢？在我们的示例JavaScript中（假设JavaScript和HTML在同一个文件夹中），网页中的HTML现在显示为：

<script type="text/javascript" src="framebreak.js"> </script>

我们还有一个名为framebreak.js的单独文件，其中包含：

if (top.location != self.location) top.location = self.location;

您的文件名和文件内容将与此大不相同，因为您将提取网页中嵌入的任何JavaScript，并根据其功能为文件指定描述性名称。提取它的实际过程将是相同的，尽管不管它包含哪些行。

例二和例三中的另外两行呢？好的，示例2中这些行的目的是对Netscape 1和Internet Explorer 2隐藏JavaScript，这两个版本都不再有人使用了，因此这些行一开始就不需要了。将代码放在外部文件中会对不理解脚本标记的浏览器隐藏代码，这比在HTML注释中更有效。第三个示例用于XHTML页面，告诉验证器JavaScript应该被视为页面内容，而不是验证为HTML（如果您使用的是HTML doctype而不是XHTML doctype，那么验证器已经知道这一点，因此不需要这些标记）。使用单独文件中的JavaScript，页面中不再有任何JavaScript可供验证程序跳过，因此不再需要这些行。

JavaScript用于向网页添加功能的最有用的方法之一是对访问者的操作执行某种处理。你想回应的最常见的动作是当访问者点击某个东西时。允许您响应访问者单击某个对象的事件处理程序称为onclick。

当大多数人第一次想到将onclick事件处理程序添加到他们的网页时，他们会立即想到将其添加到标记中。这给出了一段代码，通常看起来像：

<a href="#" onclick="dosomething(); return false;">

这是使用onclick的错误方法，除非在href属性中有一个实际的有意义的地址，这样没有JavaScript的人在单击链接时就会被转移到某个地方。许多人还忽略了此代码中的“return false”，然后想知道为什么当前页面的顶部总是在脚本运行后加载（这就是href=“#”的含义）除非所有事件处理程序返回false，否则将告诉页面执行。当然，如果您有一些有意义的内容作为链接的目标，那么您可能希望在运行onclick代码后转到那里，然后您将不需要“return false”。

许多人没有意识到的是，onclick事件处理程序可以添加到网页中的任何HTML标记中，以便在访问者单击该内容时进行交互。因此，如果您希望在人们单击图像时运行某些内容，您可以使用：

<img src="myimg.gif" onclick="dosomething()">

如果您希望在人们单击某些文本时运行某些内容，您可以使用：

<span onclick="dosomething()">some text</span>

当然，这些并不能自动提供视觉线索，即如果你的访问者像链接那样点击它们，就会有响应，但你可以通过适当地设置图像样式或跨度，轻松添加视觉线索。

关于这些附加onclick事件处理程序的方法，需要注意的另一点是，它们不需要“returnfalse”，因为在单击元素时不存在需要禁用的默认操作。

这些附加onclick的方法是对许多人使用的糟糕方法的一大改进，但它离成为最好的编码方法还有很长的路要走。使用上述任何方法添加onclick的一个问题是，它仍然将JavaScript与HTML混合在一起。onclick不是一个HTML属性，它是一个JavaScript事件处理程序。因此，为了将我们的JavaScript与HTML分开，使页面更易于维护，我们需要将onclick引用从HTML文件中取出，放到它所属的一个单独的JavaScript文件中。

最简单的方法是用一个id替换HTML中的onclick，这样可以很容易地将事件处理程序附加到HTML中的适当位置。因此，我们的HTML现在可能包含以下语句之一：

< img src="myimg.gif" id="img1"> <span id="sp1">some text</span>

然后，我们可以在一个单独的JavaScript文件中对JavaScript进行编码，该文件链接到页面主体的底部，或者位于页面的头部，我们的代码位于一个函数中，该函数在页面完成加载后被调用。我们用于附加事件处理程序的JavaScript现在如下所示：

document.getElementById('img1').onclick = dosomething; document.getElementById('sp1').onclick = dosomething;

有一件事需要注意。您会注意到，我们总是完全用小写字母编写onclick。在用HTML编写语句时，您会看到一些人将其编写为onClick。这是错误的，因为JavaScript事件处理程序的名称都是小写的，并且没有像onClick这样的处理程序。当您将JavaScript直接包含在HTML标记中时，您可以不受影响，因为HTML不区分大小写，浏览器会将其映射到正确的名称。由于JavaScript是区分大小写的，而且JavaScript中没有onClick这样的东西，所以JavaScript本身的大小写错误是无法避免的。

与以前的版本相比，这段代码是一个巨大的改进，因为我们现在都将事件附加到HTML中的正确元素，并且JavaScript与HTML完全分离。不过，我们可以在这方面进一步改进。

剩下的一个问题是，我们只能将一个onclick事件处理程序附加到特定元素。如果我们在任何时候都需要将不同的onclick事件处理程序附加到同一元素，那么之前附加的处理将不再附加到该元素。当您为不同的目的向网页添加各种不同的脚本时，其中至少有两个或多个脚本可能希望在单击同一元素时提供一些要执行的处理。这个问题的混乱解决方案是确定这种情况出现的地方，并将需要一起调用的处理组合到执行所有处理的函数中。

虽然像这样的冲突在onclick中比在onload中更不常见，但必须提前识别冲突并将其组合在一起并不是理想的解决方案。当需要附加到元素的实际处理随着时间的推移而改变时，这根本不是一个解决方案，因此有时需要做一件事，有时需要做另一件事，有时需要同时做两件事。

最好的解决方案是完全停止使用事件处理程序，而是使用JavaScript事件侦听器（以及Jscript对应的attachEvent，因为这是JavaScript和Jscript不同的情况之一）。我们可以通过首先创建一个addEvent函数来实现这一点，该函数将根据所运行的语言支持的两个函数中的哪一个来添加事件侦听器或附件；

function addEvent(el, eType, fn, uC) { if (el.addEventListener) { el.addEventListener(eType, fn, uC); return true; } else if (el.attachEvent) { return el.attachEvent('on' + eType, fn); } }

现在，我们可以使用以下方法附加我们希望在单击元素时发生的处理：

addEvent( document.getElementById('spn1'), 'click',dosomething,false);

使用这种在单击某个元素时附加要处理的代码的方法意味着，在单击某个特定元素时，进行另一个addEvent调用以添加要运行的另一个函数不会用新的处理替换先前的处理，而是允许两个函数都运行。当调用addEvent时，我们不需要知道是否已经有一个函数附加到元素上，当单击该元素时，新函数将与以前附加的函数一起运行。

如果我们需要能够从单击元素时运行的内容中删除函数，那么我们可以创建一个相应的deleteEvent函数，该函数调用适当的函数来删除事件侦听器或附加的事件？

最后一种附加处理方式的一个缺点是，那些真正旧的浏览器不支持将事件处理附加到网页的这些相对较新的方式。到目前为止，应该没有足够多的人使用这种过时的浏览器，在我们编写的J（ava）脚本中忽略它们，而只是以不会导致大量错误消息的方式编写代码。上述函数的编写目的是，如果它使用的两种方式都不受支持，则不执行任何操作。这些非常古老的浏览器中的大多数也不支持引用HTML的getElementById方法，因此简单的if（！document.getElementById）返回false；在任何函数的顶部，执行此类调用也是合适的。当然，许多编写JavaScript的人并没有考虑到那些仍在使用老式浏览器的人，因此这些用户现在必须习惯于在他们访问的几乎每个网页上看到JavaScript错误。

您使用以下哪种方式将处理附加到您的页面中，以便在访问者单击某个内容时运行？如果您这样做的方式更接近页面顶部的示例，而不是页面底部的示例，那么您可能应该考虑改进编写onclick处理的方式，使用页面下方显示的一种更好的方法。

查看跨浏览器事件侦听器的代码，您会注意到还有第四个参数，我们称之为uC，从前面的描述中看，它的用法并不明显。

浏览器有两种不同的顺序，当事件被触发时，浏览器可以按照这两种顺序处理事件。它们可以从外到内，从标签到触发事件的标签，也可以从内到外，从最特定的标签开始工作。这两个分别称为capture和bubble，大多数浏览器允许您通过设置此额外参数来选择多个处理的运行顺序。

• uC=捕获阶段过程的真实值
• uC=气泡阶段处理错误。

因此，在捕获阶段，如果有几个其他标记围绕着触发事件的标记，则首先从最外层的标记开始，向触发事件的标记移动，然后一旦事件附加到的标记已被处理，气泡阶段将反转该过程并再次返回。

Internet Explorer和传统的事件处理程序总是处理冒泡阶段，而不是捕获阶段，因此总是从最具体的标记开始并向外工作。

因此，对于事件处理程序：

<div onclick="alert('a')><div onclick="alert('b')">xx</div></div>

单击xx会弹出气泡，首先触发警报（'b'），然后触发警报（'a'）。

如果这些警报是使用uC true的事件侦听器附加的，则除Internet Explorer之外的所有现代浏览器都会先处理警报（“a”），然后再处理警报（“b”）。