给页面加速,干掉Dom Level 0 Event
?
现在的web应用越来越复杂,需要响应各种各样的用户触发事件,因而也就不可避免的,需要给我们的html页面上的dom元素增加事件监听函数.
我们知道给dom元素绑定事件监听函数的方法有如下3种:
1 :??页面html:
<BODY> <ul id="list"></ul> <SCRIPT LANGUAGE="JavaScript"> <!-- var $ = function(id){ return document.getElementById(id) }; function test(){ alert(1) } var ul = $("list"); var count = 5000; // ie7 //--> </SCRIPT> <script> var d = new Date() var str = []; for(var i = 0;i<count;i++){ str.push('<li onclick="test();">'+i+'</li>') } ul.innerHTML = str.join(""); alert(new Date - d); //670 刷新时时间增加 85 </script> <SCRIPT LANGUAGE="JavaScript"> <!-- /*var d = new Date() var str = []; for(var i = 0;i<count;i++){ str.push('<li>'+i+'</li>') } ul.innerHTML = str.join(""); alert(new Date - d); */ //125 //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- /*var d = new Date() var str = []; for(var i = 0;i<count;i++){ str.push('<li>'+i+'</li>') } ul.innerHTML = str.join(""); var li = document.getElementsByTagName("li"); var l = li.length; for(var i=0;i<l;i++){ li[i].onclick = test; } li = null; alert(new Date - d);*/ //250 //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- /*var d = new Date() var str = []; for(var i = 0;i<count;i++){ str.push('<li>'+i+'</li>') } ul.innerHTML = str.join(""); var li = document.getElementsByTagName("li"); var l = li.length; for(var i=0;i<l;i++){ li[i].attachEvent("onclick",test); } li = null; alert(new Date - d);*/ //188 //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- /*var d = new Date() var str = []; for(var i = 0;i<count;i++){ str.push('<li>'+i+'</li>') } ul.innerHTML = str.join(""); ul.attachEvent("onclick",test); alert(new Date - d);*/ //125 //--> </SCRIPT> </BODY>