JavaScript 事件委托

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;
        }
    });