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