JS事件委托简洁版

概念：

事件委托说白了就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。

好处：

可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒

例子：

<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li> <li id="sayHi">Say hi</li> </ul>

如果老方法 就得每一个li都添加点击事件 ，这样会对内存消耗非常大

var item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething"); var item3 = document.getElementById("sayHi"); item1.onclick = function() { location.href = "http://www.baidu.com"; }; item2.onclick = function() { document.title = "事件委托"; }; item3.onclick = function() { alert("hi"); };

这个时候我们就可以用事件委托的方式 把 li 的点击事件放在父标签上

var item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething"); var item3 = document.getElementById("sayHi"); document.addEventListener("click", function (event) { var target = event.target; switch (target.id) { case "doSomething": document.title = "事件委托"; break; case "goSomewhere": location.href = "http://www.baidu.com"; break; case "sayHi": alert("hi"); break; } })