JavaScript第五章：分离JavaScript
实际上，负责各项任务的JavaScript函数已存入外部文件，问题出在内嵌的事件处理函数中。
如果我们适用一个“挂钩”，就像css机制中的class或id属性那样，JavaScript代码调用行为与HTML文档的结构与内容分离开。
JavaScript语言不要求事件必须在HTML中处理，我们可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上。
element.event=action;
1.如何确定获得事件的元素
①如果想把一个事件添加到某个带有特定id属性的元素上，用getElementById就可以解决
getElementById(id).event=action;②如果事情涉及多个元素，就可以用getElementsByTagName或getAttribute把事件添加到有着特定属性的一组元素上。
具体步骤：把文档中所有链接全放在一个数组中；遍历数组；如果某个链接的class属性等于popup，就表示这个链接在点击时应该调用popUp()函数。于是，把这个链接的href属性传给popUp函数，取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
if(link[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
//以上代码将popUp函数的onclick事件添加到了有关的链接上。只要把它们存入到一个外部JavaScript文件
//就等于把这些操作从HTML文档中分离出来仍有问题要解决：代码的第一行语句在JavaScript文件被加载时立刻执行。如果JavaScript文件是从HTML文档里的<head>部分用<script>标签调用的，它将在HTML文档加载之前加载到浏览器。如果<script>标签位于文档底部</body>之前，就不能保证哪个文件先结束加载。因为脚本加载时文档可能不完整，所以模型也不完整，getElementByTagName等方法就不能正常工作。
解决方法：必须让这些代码在HTML全部加载到浏览器之后马上开始执行。HTML文档全部加载完毕时触发一个事件，这个事件有自己的事件处理函数。
文档被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在了。
//将JavaScript代码打包在prepareLinks函数里，并把这个函数添加到window对象的onload事件上
window.onload=prepareLinks;
function prepareLinks(){
var links=document.getElemntsByTagName("a");
for(var i=0;i<links.length;i++){
if(links[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
//别忘记把popUp函数也保存在那个外部JavaScript文件里去
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}
上一篇： Effective c++ 读书总结 6 - 10
下一篇： Java 计算两个日期相差天数