更新时间 2016-04-02 15:41:55
前言：
javascript和html文件分离的原则
jsp对web文档的操作，其实是对文档树种的节点进行操作,
通式为：element.event = atciotn
找元素的方法上一节就有提到过，下面回顾一下
document.getElementById("id")
document.getElementsByTagName("x")
浏览器自定义了很多事件event，所以我们只需要告知浏览器，如果发生这些事件应该怎么办，
以onload为例
window.onload = function(){ xxxx();//当然这些函数先要先定义 yyy(); }
书中有个例子
只要点击文档中<a>元素，就会打开一个弹出a指向相容的内容
分析：
我们首先要找出所有的链接元素，给所有元素添加处理函数,过程如下
- 把文档中的所有链接元素(a)放入数组
- 遍历数组元素
- 如果某个链接元素的class=“popup”,说明需要被点击时调用popUP()
- 取消这个链接的默认行为，不要把这个链接的访问者带到新的窗口
当然用到某个函数前，首先要进行定义
定义popUp函数
function popUp(winURL){ window.open(winURL,"popup","width=100,height=100"); }
添加处理函数
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.getAttribute("href")); return false; } } }
但是上述代码是有一定的问题，不会被运行
javascript文件从html文档的<head>部分的<script>标签调用，而此时HTML文档还没有全部加载到浏览器中，文档模型不完整，没有完整的DOM,getElementsByTagName()不能正常运行
var links = var document.getElementsByTayName("a");
所以第一行这句被执行时，文档中还没有任何的"a"
解决方案：当然我们可以把onclick添加到a的属性值中，但是和我们提倡的分离原则矛盾
还要html全部加载到浏览器中时,浏览器自定义了一个监控器(onload),所以我们可以把上述的操作打包成处理函数，添加给触发器
window.onload = function(){
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.getAttribute("href")); return false; } } } }
但是我们的函数还不是完善的
考虑到兼容性问题,我们需要对用到的内置函数进行检测
function prepareLinks(){ if(!document.getElementsByTagName)return false; if(!document.getElementsByTagName("a"))return false;//没有a元素，函数依然无作用 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.getAttribute("href")); return false; } } } }