我们的JavaScript和HTML文档都已经分离在两个文件中了，为什么还要提到分离JavaScript呢？实际上在内嵌的事物处理函数中，JavaScript和HTML是紧密相连的，问题也就出现在事件处理函数上，比如说有这样一个函数：
function popUp(winURL)
{
window.open(winURL,"popUp","width=320;height=480");
}
通过window.open（url,name,features）函数来打开窗口
三个参数都是可选的
（1）url：在新的窗口里打开网页的URL地址
（2）name：新打开窗口的名字
（3）features：新打开窗口的属性，包括高宽，新窗口被启用或禁用各项浏览功能（工具条，菜单条，初始显示位置，等等）注意这里的属性用",“分隔开，末尾不需要”;"结束！
HTML中的超链接设置如下：
<a href="https://blog.csdn.net/weixin_44307065" onclick=" popUp('https://blog.csdn.net/weixin_44307065');return false;">link</a>
为什么分离HTML和JavaScript？
由于使用onclick内嵌事件函数处理问题容易出现问题而且效率不佳，我们想是否能像CSS中的class属性一样，利用这样的挂钩，将HTML和JavaScript分离开来，在JS外添加事件，从而使得整个网页更加健壮。
<a href="https://blog.csdn.net/weixin_44307065" class="popup">link2</a>
这个时候我们想在HTML外部也就是JavaScript中添加事件到HTML中，关键在于如何确定到这个元素。
（1）如果只有一个元素：
getElementById(id).event=action;
（2）如果有多个元素，我们可以对返回的元素节点进行历遍，然后判断的他的class属性值：
window.onload=prepareLinks;
function prepareLinks()
{
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
if(links[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
popUp(this.href);
return false;
}
}
}
}
function popUp(winURL)
{
window.open(winURL,"popUp","width=320;height=480");
}
另外值得注意的是，在函数之前我们设置有一行window.οnlοad=prepareLinks，是因为JavaScript文档加载完时就会立刻执行函数，这个时候如果HTML文档没有加载完全，那么我们得到的document就会不完全。好在HTML加载完毕后会返回一个onload，我们利用这个信号来调用函数. 在函数前放上一行：window.οnlοad=prepareLinks表示HTML加载完全后调用函数.
这个时候我们就能根据HTML中的class属性在JavaScript中添加事件，避免直接在HTML中添加事件了。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分离JavaScript</title>
<script src="test.js"></script>
</head>
<body>
<a href="#" onclick=" popUp('https://blog.csdn.net/weixin_44307065');return false;">link1</a>
<a href="https://blog.csdn.net/weixin_44307065" class="popup">link2</a>
</body>
</html>
JS:
window.onload=prepareLinks;
function prepareLinks()
{
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
if(links[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
popUp(this.href);
return false;
}
}
}
}
function popUp(winURL)
{
window.open(winURL,"popUp","width=320,height=480");
}
