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 ...
随机推荐
- 【HtmlParser】HtmlParser使用
转载 http://www.cnblogs.com/549294286/archive/2012/09/04/2670601.html HTMLParser的核心模块是org.htmlparser.P ...
- HDU5668 Circle 非互质中国剩余定理
分析:考虑对给定的出圈序列进行一次模拟,对于出圈的人我们显然可以由位置,编号等关系得到一个同余方程 一圈做下来我们就得到了n个同余方程 对每个方程用扩展欧几里得求解,最后找到最小可行解就是答案. 当然 ...
- POJ 3169 Layout 差分约束系统
介绍下差分约束系统:就是多个2未知数不等式形如(a-b<=k)的形式 问你有没有解,或者求两个未知数的最大差或者最小差 转化为最短路(或最长路) 1:求最小差的时候,不等式转化为b-a>= ...
- HDU- 2063 过山车
http://acm.hdu.edu.cn/showproblem.php?pid=2063 过山车//我的第一个二分匹配 Time Limit: 1000/1000 MS (Java/Others) ...
- Java&MySQL Type Mapping
MySQL Type Name Return value of GetColumnClassName Returned as Java Class BIT(1) (new in MySQL-5.0) ...
- IIS7 性能(内存、CPU、当前请求耗时)监测
程序上线了,但运行过程中如果发现很CPU.内存异常,某些操作耗时,如何在生产环境中监测并查明原因呢,有以下几种工具(方式): 1.NProfiler,这是一个商业软件,有试用周期,可以监测包括Winf ...
- bzoj 2242 [SDOI2011]计算器(数论知识)
Description 你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值: 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数: 3.给 ...
- tyvj P1519 博彩游戏(AC自动机+DP滚动数组)
P1519 博彩游戏 背景 Bob最近迷上了一个博彩游戏…… 描述 这个游戏的规则是这样的:每花一块钱可以得到一个随机数R,花上N块钱就可以得到一个随机序列:有M个序列,如果某个序列是产生的随机序列的 ...
- CodeForces 362B Petya and Staircases
题意:一个小男孩要上楼梯,他一次可以走1个台阶或2个台阶或3个台阶,但是有一些台阶是脏的,他不想走在脏台阶上.一共有n个台阶和m个脏台阶,他最开始在第1个台阶上,要走到第n个台阶.问小男孩能不能不踩到 ...
- 我的新顶级域名vell001.ml
好不容易找到了一个免费的顶级域名啊,各种爽啊... 没钱的娃就只能各种求免费了!!! 以后访问我的所有站点都可以从vell001.ml开始了 Vell001主站 VellBlog VellForum