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> ...
一周排行
  • 所谓索引就是为特定的mysql字段进行一些特定的算法排序,比如二叉树的算法和哈希算法,哈希算法是通过建立特征值,然后根据特征值来快速查找,而用的最多,并且是mysql默认的就是二叉树算法 BTREE,通过BTREE算 ...
  • 造社会,造生态,超出了企业的经营范畴,马云会成功吗?<环球企业家>记者 谢璞9月8日,在阿里巴巴集团2012年网商大会的会场,来了几个讨债的,他们耀武扬威显得很不和谐.在场有人说,此前他们甚至开着货车来阿 ...
  • 权限的使用方法 在androidmanifest.xml文件中加入权限,例如加入发短信的权限: [html] <manifest xmlns:android="http://schemas.andro ...
  • 易网科技讯 7月12日消息,据国外媒体报道,今天美国证监会一份文件显示,AOL(美国在线)已经完成将即时通讯服务ICQ出售给俄罗斯公司数字天空技术(DST)的交易. 本次出售获得的1.875亿美元现金奖帮助AOL并购 ...
  • 完成收购摩托罗拉移动之后,联想的移动业务开始发力.日前,联想集团执行副总裁.移动业务总裁刘军对话易网科技,分享了其对于联想移动业务后续发展的具体思路.一.如何布局近日,互联网科技公司的普遍高估值引起了广泛关注,这得益 ...
  • 安装muse用package system安装muse即可.现在是Emacs 24的时代了.:)发布发布当前单个muse文件C-c C-t 是发布C-u C-c C-t 是不管有没有发不过的文档,都强制发布发布pdf ...
  • 自从5月7日阿里巴巴正式递交上市申请书开始,它何时正式上市就成了最受人关注的话题. <华尔街日报>最新报道称接到消息人士爆料,阿里巴巴将于9月8日,也就是下周一开始在美国路演,最早于9月18日.19日挂牌 ...
  • 读者声音 李先生反映:前些日子,公司有500多本宣传册要从上海快递去陕西咸阳.我在网上搜索到附近的德邦(文化路店),便根据网上提供的电话61558220与"德邦"取得联系."德邦&quo ...
  • 6月2日,魅族科技在北京国家会议中心发布全新千元大屏手机-魅蓝note2.作为魅蓝note系列的第二代,这款手机在外观和系统上进一步优化,那么魅蓝note2做工如何?下面小编就为大家介绍799元魅蓝Note 2真机拆 ...
  • 铁路网络售票的范围继续扩大.继K1至K500次列车从13日起可网购后,前天起,K501至K7次列车的车票也可以上网购买.自此,"C"."D"."G".&qu ...