js事件3
<!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


- window.onload:html,css,image,js,音频,flash
- read:DOM,css


- e.target:触发的对象,上图为对象 ul1
- e.target.tagname:获取事件源,触发的对象标签名,上图为ul1对应的标签
- 兼容:
- e.target:用于高级浏览器
- e.srcElement:用于低级浏览器
- 方法一(最原始)


- 方法二


- 方法三


- 方法四(最高端实用)


js事件3的更多相关文章
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡?
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
- 特殊js事件
1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...
- js 事件
事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型 内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...
随机推荐
- Lombok 安装、入门 - 消除冗长的 java 代码(转)
前言: 逛开源社区的时候无意发现的,用了一段时间,觉得还可以,特此推荐一下. lombok 提供了简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 java 代码.特别是相对于 ...
- 【转】【教程】实现Virtualbox中的XP虚拟机和主机Win7之间的共享文件夹
原文网址:http://www.crifan.com/add_share_folder_for_virtualbox_guest_xp_and_host_win7/ 已经实现了在主机Win7下,在Vi ...
- Java C# MD5 加密串一致性
Java C# MD5 加密串一致性 Java public final static String md5(String s) { char hexDigits[] = { '0', '1', ...
- Codeforces 302D
思路:最短路,map[i][j] = d*(|x[i]-x[j]| + |y[i]-y[j]|) - add[i] #include<iostream> #include<cstdi ...
- How Many Tables
How Many Tables Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Tot ...
- nyoj 84阶乘后0的个数
描述 计算n!的十进制表示最后有多少个0 输入 第一行输入一个整数N表示测试数据的组数(1<=N<=100)每组测试数据占一行,都只有一个整数M(0<=M<=10000000) ...
- <转>Windows 各种计时函数总结
本文转自MoreWindows 特此标识感谢 http://blog.csdn.net/morewindows/article/details/6854764 本文对Windows平台下常用的计时函数 ...
- POJ2184Cow Exhibition (01背包变形)
思路一下子就想到了,转移方程却没想好,看到网上一个的思路相同的代码,改的转移方程. 同时dp全部初始化为负无穷,需要注意一下. AC代码如下: /*************************** ...
- nginx 多域名配置 (nginx如何绑定多个域名)
nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里. 一.每个域名一个 ...
- windows 7 下安装 IIS 和 ArcGis Server 9.3 遇到的问题及解决方法
windows 7 下安装 IIS 和 ArcGis Server 9.3 遇到的问题及解决方法 分类: ArcGIS server 计算机2012-07-31 14:17 631人阅读 评论(0) ...