做项目的时候可能会遇到这种情况:
一个页面的中定义了多个 onload 事件, 那么在此定义 Windows.onload 函数的时候可能会不生效或者多个 onload 之间覆盖的现象.
有的朋友肯定会说用 jQuery 的 $$(document).ready(function(){})(它的另外两种写法:$(document).ready(function(){})和 $(function(){}))的方式, 其实这个函数和 JavaScript 的 onload 事件是有区别的, 那么来看看他们的区别:
他们的主要的区别有两点:
1. 执行时机
Windows.onload 方法是在网页中的所有的元素 (包括元素的所有关联文件) 都完全加载到浏览器之后才执行. 而通过 jQuery 中的 $(document).ready()方法注册的事件处理程序, 只要在 DOM 完全就绪时, 就可以调用了, 比如一张图片只要 标签完成, 不用等这个图片加载完成, 就可以设置图片的宽高的属性或样式等.
2.$(document).ready()方法可以多次使用而注册不同的事件处理程序, 而 Windows.onload 一次只能保存对一个函数的引用, 多次绑定函数只会覆盖前面的函数.
先来看 Windows.onload 方法在一个页面上注册两次会是什么样的结果:
- function one(){
- alert("one");
- }
- function two(){
- alert("two");
- }
- Windows.onload = two ;
- Windows.onload = one ;
上面的代码运行后, 会弹出 "one".
再来看看 $(document).ready()方法分两次调用会是什么结果.
- function one(){
- alert("one");
- }
- function two(){
- alert("two");
- }
- $(document).ready(function(){
- one();
- });
- $(document).ready(function(){
- two();
- });
上面的代码运行后, 会分别弹出 "one" 和 "two".
那如果既要页面完全加载完后执行, 而且要可以执行多次, 这样上面的两个方法就都不能满足了, 所以有了下面的实现:
- var loadFunc = function(func){
- if (document.addEventListener) {
- Windows.addEventListener("load", func, false);
- }
- else if (document.attachEvent) {
- Windows.attachEvent("onload", func);
- }
- }
- loadFunc(function(){
- alert(1);
- })
- loadFunc(function(){
- alert(2);
- })
loadFunc(function(){...}); 想加几个就几个, 所以上面的结果是先弹出 1 再弹出 2.
来源: http://www.bubuko.com/infodetail-2885002.html