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> ...
一周排行
  • 现象 UICollectionView的内容在按Home键再回到APP时,会下沉64像素.   原因 页面有NavigationBar,正好是64像素,Controller勾选了Adjust Scroll View ...
  • 在ASP.NET MVC 2中对于Area功能的增强,这样的增强是如何在同一个项目中更好地组织应用程序的? ASP.NET MVC 1.0时,如果我们要在一个项目中做自己网站的后台应用,而又保持URL的整洁性,是很困 ...
  • 她怎么知道我的QQ聊天记录?她甚至还掌握了我朋友的邮件地址?我藏在电脑里的文件居然都被看到了!这是怎么回事? 电脑到底能不能保护我们的隐私?要是你使用不当,肯定惨遭"偷窥"!就好像老爸偶尔用我的电 ...
  • [csharp]  using System;  using System.Collections;    namespace CStack  {      class Program      {          ...
  • 149. You executed the following command to create a tablespace called SALES_DATA: SQL> CREATE TABLESPACE ...
  • 公司最近需要在用Gtest框架,进行修改,实现自己的测试框架,这段时间一直在看gtest源码,这篇文章从网上找到,对自己非常有帮助,贴出来供大家学习,转载地址:http://www.cnblogs.com/coder ...
  • 由于malloc/free是库函数,不是运算符,他们不能执行构造函数和析构函数,只是负责分配内存. 1.malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内 ...
  • 受证监会开始接收创业板企业申报材料消息鼓励,尤其随着地方政府各项扶持政策的出台,陕西中小企业对资本市场的热情更为旺盛. 上周末,来自陕西各个地市及西安高新技术产业开发区.杨凌农业高新技术产业示范区的100多家具备高成 ...
  • 常用命令                         C-v 向上翻页                         C-p 向上一行    C-b 向左一个字符                        ...