js事件3

时间:2024-11-06 21:04:02
一、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事件3js事件3
二、read——window.onload 比 HTML 部分加载速度快
  • window.onload:html,css,image,js,音频,flash
  • read:DOM,css
三、事件委托
  • js事件3js事件3
  • e.target:触发的对象,上图为对象 ul1
  • e.target.tagname:获取事件源,触发的对象标签名,上图为ul1对应的标签
  • 兼容:
    • e.target:用于高级浏览器
    • e.srcElement:用于低级浏览器
四、传参
  • 方法一(最原始)
js事件3js事件3
  • 方法二
js事件3js事件3
  • 方法三
js事件3js事件3
  • 方法四(最高端实用)
js事件3js事件3