事件委托原理**:事件冒泡机制
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
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;
}
})
优点:
1.大量减少内存占用,减少事件注册。
2.新增元素实现动态绑定事件
实现方式:
一、可用addEventListener();** //所有主流浏览器,除了IE8及更早IE版本。
二、attachEvent()** //IE8及IE更早版本