zoukankan      html  css  js  c++  java
  • 分离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");

    }

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

  • 相关阅读:
    Linux GNOME桌面使用技巧大全
    联想旭日 C465A 开机白屏
    基础知识:编程的工作机制
    JavaCC 学习笔记
    笨办法学R编程(1)
    一些学习方法总结
    使用变量表示字、数字和值
    栈溢出2017doubly_dangerous
    栈溢出warmup_csaw_2016
    基础学习ret2text
  • 原文地址:https://www.cnblogs.com/Eleanore/p/2518169.html
Copyright © 2011-2022 走看看