开卷有益，做一个精益求精的开发者！
事件委托
使用前提：当页面存在大量元素，且每个元素都要一次或多次绑定事件（如点击事件）。
使用原因：事件绑定占用处理时间，浏览器会跟踪每个事件处理，会占用更多内存。
解决办法：使用事件委托。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>事件委托</title>
<style>
div{
border:1px solid #999;
padding:20px;
}
div.box{
width:100px;
height:100px;
line-height: 100px;
cursor: pointer;
background: #ccc;
margin:10px;
color:#f7f7f7;
text-align: center;
}
</style>
</head>
<body>
<div id="root" class="root">
<div class="box click3">click3事件</div>
<div class="content">
<div class="box click2">click2事件</div>
<div class="article">
<div class="box click1">click1事件</div>
</div>
</div>
</div>
<script>
//点击事件
function fn1(){
console.log("您触发了click1事件！");
};
function fn2(){
console.log("您触发了click2事件！");
};
function fn3(){
console.log("您触发了click3事件！");
};
//事件委托
//避免了在所有需要绑定事件的元素上绑定事件处理，仅在其最外层元素上使用事件委托。
document.getElementById("root").οnclick=function(e){
console.log("事件委托");
//浏览器兼容
e = e||window.event;
var target = e.target || e.srcElement;
console.log(target);
console.log(target.className);
//先判断是哪个目标元素，再触发对应的事件。
//注意按照冒泡规则确定判断顺序，先判断内层元素。
//注意class有多个的情况。也可以用target.id,但不建议使用。
if(target.className == 'box click1'){
fn1();
}else if(target.className == 'box click2'){
fn2();
}else if(target.className == 'box click3'){
fn3();
}else{
//没有符合的目标元素，退出。
return
}
}
</script>
</body>
</html>
测试
数字为点击顺序
