分离javascript

分离javascript代码，javascript函数都已存入有关的外部文件，而问题出现在内嵌的事件处理函数。

javascript语言不要求事件必须在HTML文档里处理，我们可以在外部javascript文件里把一个事件添加到HTML文档中的元素上。

以onclick事件和popUp（）函数为例：

1. 把文档里的所有链接全放入一个数组里。
2. 遍历数组。
3. 如果某个链接的class属性等于popup，就说明这个链接在被点击时将调用popUp（）函数。

于是：

• 把这个链接的href属性值传递给popUp（）函数。
• 取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。

实现上述步骤的javascript代码：

   var links = document.getElementsByTagName("a");

   for ( var i = 0 ; i<links.length ;  i ++){

        if ( links[i].className == "popup"){

                links[i].onclick = function(){

                     popUp(this.getAttribute("href"));

                     return false;

                 }

         }

    }

光将这段代码加入到外部文件，它们将无法正常运行。因为第一行是var links = document.getElementsByTagName("a"); 必须让这些代码在HTML文档全部加载到浏览器里，而此时HTML文档还没有全部加载到浏览器,文档模型也不完整。将javascript代码打包在prepareLinks()函数里，并把这个函数添加到window对象的onload事件上去，就可以正常工作了。

window.onload = prepareLinks;

function prepareLinks(){

      for ( var i = 0 ; i<links.length ;  i ++){

        if ( links[i].className == "popup"){

                links[i].onclick = function(){

                     popUp(this.getAttribute("href"));

                     return false;

                  }

           }

      }

}

别忘记把popUp函数也保存在外部文件里：

function popUp (winURL){

     window.open(winURL,"popup","width=320;height=480");

}

这是一个很简单的例子，但它演示了怎样成功的把行为和结构分离开来。

转载于:https://www.cnblogs.com/Eleanore/archive/2012/05/25/2518169.html