问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考。

  一、对于小型的网页,可以直接用下面的代码绑定即可:

window.onload = func;

  二、在复杂的一些可以用:

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

  在需要绑定的函数不太多的场合,这是最简单的解决方案。

  三、对于复杂场合,则需要用到addLoadEvent函数来完成该任务了。不多说,先上代码:

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

  通过阅读代码,可以得出该函数完成的操作有:

    1、把现有的window.onload事件处理函数的值存入oldonload;

    2、如果这个函数还未绑定任何函数,就像“一”那样添加;

    2、如果这个函数上已经绑定了一些函数,则把新函数追加到现有指令的末尾。

  可以看出,它把在网页加载完成时需要执行的函数创建成了一个队列,需要的时候直接加入队列即可。至于如何调用该函数进行绑定,在可以在你实现完新函数后,在后面跟着调用一下就ok,如:

addLoadEvent(新函数名);

  最后,addLoadEvent函数有Simon Willison编写,详见http://simon.incutio.com

js共享onload事件的更多相关文章

  1. JS之ONLoad事件

    如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: <!DOCTYP ...

  2. 原生javascript 共享onload事件

    在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, ...

  3. 共享onload事件

    在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...

  4. 关于js中onload事件的部分报错。

    当使用onload获取元素时,建议在onload事件之前定义需要获取的元素名称,在onload里面只执行获取操作,这样获取到的元素在后面才能顺利使用. <!DOCTYPE html> &l ...

  5. js window.onload事件

    1.最简单的调用方式 直接写到html的body标签里面,如: ? 1 2 3 4     <html>       <body onload="func()"& ...

  6. onload事件与ready事件的区别,原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

  7. 【JS】怎样同一时候处理多个window.onload事件

    有时引用其他js时,其js却使用了window.onload事件,这种话,引入的页面的onload事件就有可能执行不了.如何才干两个都执行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(wi ...

  8. JS ready和onload事件 比较分析

    页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onlo ...

  9. (js有关图片加载问题)dom加载完和onload事件

    引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

随机推荐

  1. Using 1.7 requires compiling with Android 4.4 (KitKat); currently using API 10

    今天编译一个project,我设置为api 14,可是编译报错: Using 1.7 requires compiling with Android 4.4 (KitKat); currently u ...

  2. Excel异常Cannot get a text value from a numeric cell

    POI操作Excel时数据Cell有不同的类型,当我们试图从一个数字类型的Cell读取出一个字符串并写入数据库时,就会出现Cannot get a text value from a numeric ...

  3. strcmp函数和strcpy函数

    (一)strcmp函数 strcmp函数是比較两个字符串的大小,返回比較的结果.一般形式是: i=strcmp(字符串,字符串); 当中,字符串1.字符串2均可为字符串常量或变量:i   是用于存放比 ...

  4. sql server和my sql 命令(语句)的差别,sql server与mysql的比較

    sql与mysql的比較 1.连接字符串 sql  :Initial Catalog(database)=x;  --数据库名称       Data Source(source)=x;        ...

  5. oracle14 复杂数据类型

    复合类型-pl/sql表类型 相当于高级语言中的数组,但是需要注意的是在高级语言中数组的下标不能为负数,而pl/sql是可以为负数的,并且表元素的下标没有限制.实例如下: Sql代码 .declare ...

  6. Flume NG中的Netcat Source

    NetCat是一个非常简单的Unix工具,可以读.写TCP或UDP网络连接(network connection)中数据 在Flume中的netcat支持Flume与NetCat整合,flume可以使 ...

  7. RecyclerView实现瀑布流效果(图文详解+源码奉送)

    最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...

  8. c# 前端写代码的情况

    <%for(int i=0;i<list_model.Count;i++) { %> <div style=" padding-left:35px;padding-r ...

  9. play app to war

    project/Build.scala import sbt._ import Keys._ import play.Play.autoImport._ import PlayKeys._ impor ...

  10. BigDecimal类型的详情

    一.简介 1.概述 BigDecimal由任意精度的整数非标度值和32位的整数标度(scale)组成.如果为零或正数,则标度是小数点后的位数.如果为负数,则将该数的非标度值乘以10的负scale次幂. ...