JavaScript事件的内存和性能

JavaScript中，添加到页面的事件处理程序数量直接关系到页面的整体运行性能。
优化方法：事件委托，移除事件处理程序

事件委托

事件委托利用事件冒泡解决事件处理程序过多的问题，只指定一个事件处理程序就可以管理某一类型的所有事件。

例子：

// HTML
    <ul id="myLinks">
        <li id="goSomewhere">go somewhere</li>
        <li id="doSomething">do somethind</li>
        <li id="sayHi">say hi</li>
    </ul>
// JavaScript
    let item1 = document.getElementById("goSomewhere");
	let item2 = document.getElementById("doSomething");
	let item3 = document.getElementById("sayHi");
	
	item1.addEventListener('click', function(event) {
	    alert("id1:: " + target.id);
	});
	item2.addEventListener('click', function(event) {
	    alert("id2:: " + target.id);
	});
	item3.addEventListener('click', function(event) {
	    alert("id3:: " + target.id);
	});

使用事件委托，在DOM树中尽量高的层次上添加一个事件处理程序

let list = document.getElementById("myLinks");

list.addEventListener('click', function() {
    let target = event.target;
    switch(target.id) {
        case "id1":
            alert("id1:: " + target.id);
            break;
        case "id2":
            alert(" id2:: " + target.id);
            break;
        case "id3":
            alert(" id3:: " + target.id);
            break;
    }
});

与未使用事件委托的程序相比，最终结果相同，但是事件委托需要的内存更少，所有用到按钮的事件（click，mousedown，mouseup，keyup，keydown，keypress）都适合采用事件委托技术。
**ps：**mouseover和mouseout事件虽然也冒泡，但要适当处理它们并不容易，因为要经常计算元素的位置。

移除事件处理程序

在不需要的时候移除事件处理程序，也可以优化性能和内存。
内存中留有过时不用的 “空事件处理程序” （dangling event handler），也是造成Web应用程序内存与性能问题的主要原因。
一般发生在innerHtml或者removeChild或者replaceChild等方法时候；

<div id="myDiv">
    <input type="button" value="click me" id="mybtn" />
</div>
<script>
let btn = document.getElementById("mybtn");
btn.onclick = function() {
    alert(this.value)    // 先执行某些操作
    btn.onclick = null;     // 移除事件处理程序
    document.getElementById("myDiv").innerHTML = "processing .. "
}
</script>