JS事件（五）内存与性能

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移除所有事件处理程序