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> ...
一周排行
  • <c:foreach> 标签 varStatus属性的含义 一.<c:forEach> varStatus 的四种属性 <%@ page contentType="text/h ...
  • 先下载安装xca工具,地址是http://xca.hohnstaedt.de/ 先用xca创建一本ca证书 xca打开的界面 依次File, New DataBase,选择xdb文件保存路径,再输入密码 切换到Cer ...
  •     如果在代码中使用了数据控件如 DAO, RDO, 或 ADO, 在退出时应该关闭所有打开的 recordset, database,和 workspace . 虽然对象能自动注销, 但是数据连接不会马上断开, ...
  • 008-Scala主构造器.私有构造器.构造器重载实战详解 Scala主构造器实战 无参数的主构造器                     分析 1.name 需要赋初值,一般通过占位符来代表空值 2.privat ...
  • /* ============================================================================ Name : TeatArr.c Author : lf ...
  • 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 首先进行样式展示希望对大家有所帮助,也希 ...
  • 开始学习驱动的时候,是将驱动程序编译成模块然后用mknod命令手动建立设备节点以提供给应用程序调用.这对于刚开始调试驱动程序的时候常用的一种方法.但是,当有种需要必须在系统启动的时候就将驱动程序就绪,来供应用层程序调 ...
  • 这是一篇懒的备忘录,Maven有什么好处,可以百度,简单说有点像.NET的Nuget,但完全不一样,搭建环境为两步: 1.Maven下载配置环境变量就好了: 2.新版的Eclipse已经自带Maven插件,查看Ecl ...
  •  1 which     1 which命令是用来查找可执行程序的文件,用法是which 文件名     2 比如我在家目录下创建一个文件名为tmp,然后我which tmp,这样我们是无法找到的     3 但是如 ...
  •  <%@ page contentType="text/html;charset=gb2312"%> <%@ page import="java.sql.*" ...