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");
}

JavaScript第五章：分离JavaScript

1.如何确定获得事件的元素

猜你喜欢