1. 事件委托

事件處理程序過多的解決方法就是事件委托，事件委托利用的是事件冒泡。
事件冒泡：事件由最具體的元素接收，然后逐級向上傳播。

<ul id="test">
    <li id="eat">吃飯</li>
    <li id="sleep">睡覺</li>
    <li id="play">打豆豆</li>
</ul>

一般情況下，被點擊后進行相應的操作的事件處理程序如下，我們需要給每一個可點擊的元素添加事件處理程序，但是這種做法會出現需要添加很多的事件處理程序。

    var eat = document.getElementById("eat");
    var sleep = document.getElementById("sleep");
    var play = document.getElementById("play");

    eat.addEventListener("click",function () {
        alert("eat")
    });
    sleep.addEventListener("click",function () {
        alert("sleep")
    });
    play.addEventListener("click",function () {
        alert("play")
    })

改為事件委托之后的處理，只需要在較高的層次中添加一個事件處理程序。

    var list = document.getElementById("test");
    list.addEventListener("click", function (event) {
        switch (event.target.id) {
            case "eat": alert("eat");break;
            case "sleep": alert("sleep");break;
            case "play": alert("play");break;
        }
    });