每日一题_JavaScript.两种方式实现网页加载后onload绑定多个函数?

具体需求:

1. 为网页加载后触发的onload事件绑定多个执行函数

实现思路:

1. 可直接给onload绑定一个匿名函数,匿名函数内部调用多个函数

2. 可自定义个函数,首先保存之前window.onload的值,然后判断window.onload的类型是否为function,如果不是就让window.onload的值设置为自定义的函数,否则就先执行window.onload之前绑定的函数,然后在执行自定义的函数

具体代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript">
        function func1(){
            alert(/(?:function)([^\(]+)/.exec(arguments.callee)[1])
        }
        function func2(){
            alert(/(?:function)([^\(]+)/.exec(arguments.callee)[1])
        }
        // 方法一, 给onload绑定一个匿名函数,在匿名函数内部调用多个函数
        window.onload = function(){
            func1()
            func2()
        }
        
        // 方法二, 定义一个函数来接受要绑定的方法,判断window.onload当前值来加载执行
        function addOnLoadEvent(func){
            var oldOnLoad = window.onload
            if(typeof window.onload == ‘function‘){
                window.onload = function(){
                    oldOnLoad()
                    func()
                }
            }else{
                window.onload = func
            }
        }
        addOnLoadEvent(func1)
        addOnLoadEvent(func2)
    </script>
    </body>
</html>

总结说明:

1. 强烈推荐第二种更加灵活的方式来创建多函数绑定,其实此方法还可以支持大多数内置事件处理方法,但是一定要注意的是一定要将函数赋值给window.onload,千万不要直接调用,不然会出现意想不到的结果.

时间: 2024-12-25 03:32:19

每日一题_JavaScript.两种方式实现网页加载后onload绑定多个函数?的相关文章

ios的UIImage的两种不同的图片加载方式 tom猫

在ios的UI交互设计时,对图片的处理是难免的:不同的处理方式会对内存有不同的影响: ************************************************************ a:图片格式及NSBundle加载全路径: 1>xcode或者说苹果官方是极力推荐使用的图片格式是png 2>所有如果项目中用得是png的图片,则不用写后缀名 3>其他格式要求后缀名,特别是用UIImage加载图片时 NSBundle加载全路径的常用代码: ? 1 2 3 4 //

android中两种方式打开网页

一.你要打开一个网页你可以自己写一个webview,在自己的程序中就可以打开. wv = (WebView) findViewById(R.id.webView1); wv.getSettings().setJavaScriptEnabled(true); wv.setScrollBarStyle(0); WebSettings webSettings = wv.getSettings(); webSettings.setAllowFileAccess(true); webSettings.se

清空FORM表单的几种方式 Reset 重加载

1. form中定义name <form name = "sbform" action="sb_add.php" method="post"> 用Reset清空 <input type="button" value="清空" onclick="sbform.reset()" /> 2.重加载 <input type="button" va

jQuery开发插件的两种方式

最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验讲讲插件开发.jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展

数位dp初步——数位dp的两种方式

数位dp:一类统计区间[L,R]内某种符合规定的数字个数的题目.特征是R的范围会很大,O(N)范围内无法完成. 一般而言,解决这类题目有两种方式,一种是递推,另一种是记忆化搜索. 递推: 1)利用dp求出数组f[i][j](表示有i位,最高位为j的数字中符合要求的数字的个数) 2)根据给出的[L,R],利用f[]统计答案 记忆化搜索: 1 int dfs(int pos,int pre,int lim){//当前位置 前一位的数字 是否有限制 2 if(pos<=0)return 1; 3 if

WebService的两种方式SOAP和REST比较 (转)

我的读后感:由于第一次接触WebService,对于很多概念不太理解,尤其是看到各个OpenAPI的不同提供方式时,更加疑惑.如google map api采用了AJAX方式,通过javascript提供API,而淘宝TOP则采用直接的HTTP+XML请求方式,最令我疑惑的是教材上讲的WSDL,UDDI从没有在这些API中出现过.现在知道了WebService原来有两种方式,一是SOAP协议方式,在这种方式下需要WSDL,UDDI等,二是REST方式,这种方式根本不需要WSDL,UDDI等.而且

jQuery中开发插件的两种方式(附Demo)

做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展的插件 类扩展的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关

HDU 1213 How Many Tables (并查集,连通分支数,两种方式)

How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 23012    Accepted Submission(s): 11485 Problem Description Today is Ignatius' birthday. He invites a lot of friends. Now it's din

jQuery中插件开发两种方式

最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验讲讲插件开发.jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展