你可能会遗忘onload的知识点详解

Posted 2021-02-07 martharen-diligence

首先，我们假设网页中有两个函数，Js代码如下：

function one(){
        alert("one");
}
function two(){
        alert("two");
}       

当网页加载完毕时，分别调用one,two函数：

window.onload=one;
window.onload=two;

guess一下会出现什么结果？
结果如下：
弹出"two"对话框

reason：
onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数,因此不能在现有的行为上添加新的行为。
为了达到两个函数顺序触发的效果，我们只能再创建一个新的js方法来实现，代码如下：

window.onload = function(){
            one();
            two();
}

But, 如果有多个js文件，每个文件都需要用到window.onload方法，这种方法会很麻烦。这里我们使用jQuery的$(document).ready()方法,每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为会根据注册的顺序依次执行,代码如下：

    function one(){
                alert("one");
            }
    function two(){
                alert("two");
            }
    $(document).ready(function(){
                one();
            });
    $(document).ready(function(){
                two();
            });

End

ps：部分摘选自《锋利的jQuery》 -人民邮电出版社