js事件3

一、loading——(用来加载位于网页中的文件,而非本地的)
例子:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1">loading...... <span id="span1">0%</span></div>
</body>

<script type="text/javascript">
    var arr=["http://h.hiphotos.baidu.com/image/pic/item/00e93901213fb80e6c1c307635d12f2eb8389445.jpg","http://e.hiphotos.baidu.com/image/pic/item/5882b2b7d0a20cf4d51141c275094b36acaf992e.jpg","http://f.hiphotos.baidu.com/image/pic/item/d62a6059252dd42aedabbeb6003b5bb5c9eab809.jpg"];

    var div1=document.getElementById("div1");
    var span1=document.getElementById("span1");

    var imgs=[];
    var index=0;

    for (var i=0; i<arr.length; i++){

        var imgObj=new Image();
        imgObj.src=arr[i];

        imgObj.onload=function (){

            index++;
            span1.innerHTML=parseInt(index/arr.length*100)+"%";
            imgs.push(this);

            if (index==arr.length){
                //全部加载完毕
                div1.innerHTML="";

                for (var j=0; j<arr.length; j++){

                    div1.appendChild(imgs[j]);
                }
            }
        }
    }
</script>
</html>
  • DOMContentLoaded:相当于onload
js事件3
js事件3
 
二、read——window.onload 比 HTML 部分加载速度快
  • window.onload:html,css,image,js,音频,flash
  •  read:DOM,css
 
三、事件委托
  • js事件3
    js事件3
  • e.target:触发的对象,上图为对象 ul1 
  • e.target.tagname:获取事件源,触发的对象标签名,上图为ul1对应的标签
  • 兼容:
    • e.target:用于高级浏览器
    • e.srcElement:用于低级浏览器
 
四、传参
  • 方法一(最原始)
js事件3
js事件3
  • 方法二
js事件3
js事件3
  • 方法三
js事件3
js事件3
  • 方法四(最高端实用)
js事件3
js事件3
 
更多相关文章
  •    一.考虑到安全因素,为了避免将服务端的异常发送给客户端.默认情况下,服务端出现异常会对异常屏蔽处理后,再发送到客户端.所以客户端捕捉到的异常都是同一个FaultException异常. 例如在服务端直接产生一个空引用异常,客户端捕获到的是上述异常. 服务端: class Program { s ...
  • 上周我们发布了传统编程语言的工作趋势 ,今天我们将来研究网页编程语言的趋势,包括 Ruby,Python,PHP,JavaScript,Groovy和Erlang.我并没有包括Flex因为关于Flex的数据很不准确.我也想涵盖Haskell,但是关于这个语言的数据实在太少. 下图是来自 Indeed ...
  • 之前MVC5和之前的版本中,我们要想对View文件的路径进行控制的话,则必须要对IViewEngine接口的FindPartialView或FindView方法进行重写,所有的视图引擎都继承于该IViewEngine接口,比如默认的RazorViewEngine.但新版本MVC6中,对视图文件的路径 ...
  • 一.脚本源码 使用VBS脚本遍历XML文件   1 Option Explicit 2 3 '定义常量 4 Const NodeElement = 1 '元素 5 Const NodeText = 3 '文本 6 Const NodeCDATA = 4 'CDATA 7 Const NodeEnti ...
  •   Debian.FC.Ubuntu的默认中文输入法都是SCIM,其实也挺好用的,有点类似windows下微软拼音输入法,而fcitx则有点类似windows下的紫光输入法,喜欢哪一个要看个人习惯了.我试用了一下,感觉比SCIM好用一些.下面说明如何做到开机启动Fcitx,因为debian默认启动的 ...
  •     有时,你想执行一些操作,但是这些操作必须让所有用户都登出后才能执行,例如加强安全设置,创建虚拟公司等.这时,你可以使用系统的耗尽用户(Darin Users)功能.下面跟随Reinhard一起,设置耗尽用户吧.     进入System Administration>Common> ...
一周排行
  • 2012年5月18日是个大日子.这一天,Facebook终于登陆纳斯达克,创造了科技史上规模最大的IPO.从来没有一家公司,能够像Facebook这样吸引全世界的媒体.创业者.投资人不吝笔墨与口水,热捧或质疑.但不可 ...
  • 求数列的和 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 数列的定义如下: 数列的第一项为n,以后各项为前一项的平方根,求数列的前m项的和. 输入 输 ...
  • http://www.asp888.net 豆腐技术站 我们以前在C++中曾经知道C++中有函数重载的概念,现在在ASp.Net的C#中我们仍然可以使用函数重载的概念和定义:假设我们在程序中定义了两个函数:Strin ...
  • 工作中很多地方需要同时处理多个数据表,而且用数据透视表进行排版,排序,计算字段,一个一个的做非常累,这里给出批量处理的方法.   学习VBA之前最好懂一点点VB的基础知识,因为里面的很多语法问题都是由VB来的. Su ...
  • 网站受到大量主机的非正常连接时,对源ip地址的封锁脚本 网站受到大量主机的非正常连接时,对源ip地址的封锁脚本 #!/bin/bash touch all for i in `seq 1 100` //控制脚本的循环 ...
  • iText 是java和C#中的一个处理PDF的开源类库,国外的大牛已经把它移植到Android上了,但是直接拿来用还是需要花费一点功夫,下面就用一个简单的demo来测试一下. iText项目地址:https://c ...
  •  30分钟正则表达式指导 by Jim Hollenhorst 译 寒带鱼 你是否曾经想过正则表达式是什么,怎样能够快速得到对它的一个基本的认识?我的目的就是在30分钟内带你入门并且对正则表达式有一个基本的理解.事实 ...
  • 微软sql server的jdbc驱动程序一大把,但是通过在Middlegen中通过元数据测试的不多. 开源的net.sourceforge.jtds.jdbc.Driver  驱动不是被 Sagar Saladi ...
  • 对于电子商务网站来说,让用户在购物过程中简单快捷是最重要的,其次是要有精美的页面设计以及产品图片吸引更多客户去购买商品.这里收集了60佳国外优秀的电子商务网站设计案例,希望能带给你灵感,一起欣赏. 1. Marie ...
  •      之前CSDN博客可以用的,后来发现在校内只有CSDN首页可以上去.博客文章在PC端和客户端无法登陆.在校外却可以.想到了内网限制的原因.经查找资料,下面方法亲测可用,贴出来和大家分享.      在电脑上找 ...