1、减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段
事件委托:
<ul id="ul"> <li id="goSomewhere">goSomewhere</li> <li id="doSomething">doSomething</li> <li id="sayHi">sayHi</li> </ul> <script> var ul=document.getElementById("ul"); EventUtil.addHandler(ul,"click",function(event){ event=EventUtil.getEvent(event); var target=EventUtil.getTarget(event); switch(target.id) { case "goSomewhere": location.href="https://www.baidu.com"; break; case "doSomething": document.title="I changed the title"; break; case "sayHi": alert("hi"); break; } }); </script>
核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能
利用event属性找到事件源,将事件定位到具体元素上
2、减少“空事件处理程序”
2.1、绑定有事件处理程序的元素,通过DOM操作被移除 ,但事件还在,由此产生内存浪费:
var btn=document.getElementById("btn"); EventUtil.addHandler(btn,"click",function(){ btn.onclick=null;
document.getElementById("div").innerHTML="processing..."; });
解决方案:手动移除
2.2、页面卸载时,事件处理程序滞留
解决方案:在页面卸载之前,通过onunload移除所有事件处理程序