使用原生 JavaScript 在页面加载完成后处理多个函数

网页中的 JavaScript 脚本运行是需要通过事件去触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。

  <div id="link" onclick="fun()" ></div>

上面代码的意思就是，当鼠标点击 id 为 link 的元素的时候，就触发了它的 onclick 事件，然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的，因为触发操作直接写进了 HTML 结构里面，内容和行为没有隔离开，对日后的二次开发或者修改带来不便。

此外，当事件处理与对应元素绑定起来的时候，只有在那个元素加载完之后才能进行操作。如果说把处理的脚本放在了 head 区域，浏览器会报错。因为下面的 HTML 元素还没有加载出来，head 中的处理这部分 HTML 元素的脚本已经被执行了。

JavaScript 正确的使用方法应该是 脚本与 HTML 元素分离、当页面加载完成之后再去执行。本文就来讲解如何使用原生 JavaScript 来实现。

使用监听器让脚本与 HTML 元素分离

监听器实际上的功能就是行为与内容分离的。以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数，而现在直接在 JavaScript 中对某个元素的使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数，那么就会处理这个函数。

W3C 的标准方法叫做 addEventListener ，被IE9，chrome，firefox，opera所支持，写法：

  
window.addEventListener('load',function,false);

早期 IE 中有 attachEvent 方法效果类似（做 IE 兼容用）：

  
window.attachEvent('onload',function);

上面这两条监听器的功能就是：监听 window 对象，如果 window 对象的 load （加载完成）事件被触发，那么就执行 function 这个函数。使用监听器的方法很简单，就是先获取页面中的某个元素，然后对这个元素使用监听器，定义监听的事件和对应的事件处理函数，就上文例子可以使用下面语句代替：

  
document.getElementById('link').addEventListener('click',fun,false);

这样，我们就实现了 JavaScript 与 HTML 元素分离。关于监听器更加详细的资料，请自行搜索，本文不再赘述。

window.onload 事件

onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，浏览器才会处理我们的 JavaScript 代码。基础的写法：

  
window.onload = function(){
 //code
}

这样，这个函数里面的 code 会在加载完成之后被处理。但是，这种方法有个缺陷，就是只能用于这一个函数。页面中无法出现多个 window.onload 事件，如果出现了多个 onload 事件，那么后面的内容会覆盖前面的。

那么，我们可以这样做，在一个 window.onload 事件中，写上所有需要加载的函数名，然后在外面定义函数：

  
window.onload = function(){
   func1();
   func2();
 }

function func1(){...}
function func2(){...}

这样做虽然可以解决在网页内容加载完成之后执行对应 JavaScript 代码，但是很不方便，因为我们需要把所有要加载的函数名都写进去，修改起来就会很麻烦。

结合监听器和 window.onload 实现页面加载完处理多个函数

这里需要特别提到监听器的一个优势：可以为一个元素上的同一个事件添加或者去除多个处理函数。前面说过 window.onload 事件加载的缺陷是只能在页面中使用一次。而使用监听器的方法，就可以监听为 window 的 onload 事件分别加载多个函数了。我们需要自己编写一个函数：

  
function addLoadListener(fn){
    if (typeof window.addEventListener != 'undefined'){
        window.addEventListener('load',fn,false);
    }else if(typeof document.addEventListener != 'undefined'){
        document.addEventListener('load',fn,false);
    }else if (typeof window.attachEvent != 'undefined'){
        window.attachEvent('onload',fn);
    }else{
        var oldfn = window.onload;
        if(typeof window.onload != 'function'){
            window.onload = fn;
        }else{
            window.onload = function(){
                oldfn();
                fn();
            };
        }
    }
}

这个函数使用 if 语句判断了浏览器对监听器的支持情况并且分别进行处理。如果不支持监听器，那么就使用默认的 window.onload 方法加载。这个函数的使用方法也比较简单，把它放在 JavaScript 的最顶部，然后在下面编写功能函数，如果需要将某个功能函数使用这种方法加载，就可以把函数名作为参数调用这个自定义的 addLoadListener 。代码如下：

  
addLoadListener(func);
function func() {...}

这样，就实现了页面加载完成之后处理多个函数了。

>>>继续阅读 使用原生 JavaScript 在页面加载完成后处理多个函数的全文 ...

© 我爱水煮鱼 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery 教程：简单的遮罩弹窗效果
• Sparky：用于制作走势图的 JavaScript 库
• jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
• Ratchet：使用 HTML，JS，CSS 创建 iPhone App 原型
• jQuery 跟随滚动插件：Sidebar Follow
• CDNJS：部署在 CDN 上的 JavaScript 库