事件委托的概念： 多个相同子元素的相同事件，利用事件冒泡原理，配合事件对象身上的真正的事件源属性，将事件绑定给页面上现存的共同的父元素
事件委托的作用：
- 节省效率，提升速度；
- 可以给页面上暂时不存在的元素绑定事件
事件触发(目标)对象及兼容性
事件对象.target || window.event.srcElement
**注意：**事件是由谁而起，事件的源头
事件委托的原理： 利用事件冒泡的原理，配合事件对象中事件源属性，将多个相同元素的相同事件，委托到页面上现存的共同的父元素身上
事件委托的封装(只封装事件委托的过程)
有两个参数：第一个参数表示，要传入的子元素，第二个参数表示用来接收传入的回调函数
function eveEnt(child,cb){
// 在外面执行函数并传入参数，只有返回的时候才能拿到函数里面的值
return function(eve){
var e = eve || window.event;
// 处理事件委托的兼容问题
var muBiaoEle = e.target || e.srcElement;
// child是形参，传入什么就是什么
for(var i = 0; i<child.length;i++){
if(child[i] == muBiaoEle){
// 修改this的指向
// cb.call(muBiaoEle);
// cb.apply(muBiaoEle);
cb.bind(muBiaoEle)();
}
}
}
}
事件委托的应用： 点击每个li，打印内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{background:#ccc;}
li{margin:10px 0;padding:10px;background:#eee;}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
<script type="text/javascript">
// 代码的实现：需求：点击每个li，打印内容
var aLi = document.querySelectorAll("li");
var oUl = document.querySelector("ul");
oUl.onclick = function(eve){
var e = eve || window.event;
// 通过事件对象，找到真正的触发事件的时间目标（真正的事件源）
var tar = e.target || e.srcElement;
// console.log(tar.tagName);
if(tar.tagName ==="LI"){
console.log(tar);
}
}
</script>
</body>
</html>
执行效果：
事件冒泡和事件捕获
事件冒泡：是从里到外逐个触发
事件捕获：是从外往里逐个触发
注：现在的浏览器，默认情况下都是冒泡模型
