事件委托
什么是事件委托。
事件委托是把自己该做的事情交给父级或者父级的父级，让他们代替你做这件事。
生活中也会有这样的例子，比如：在公司中有三个人会收到快递，现在又两种处理办法
1.三个人都下来接受快递，每个人都签收拿走
2.委托给前台小妹，让他代为签收，然后再根据快递上不同的人的姓名分别给他们。
同样在ＤＯＭ操作中，利用冒泡的原理，把事件加到父级的身上，达到同样的效果。
现在有一个需求，让一堆ｌｉ的背景色变成红色。点击ｌｉ变色
ｊｓ代码：
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
this.style.background='red';
};
}
这样写没有问题，但是如果页面里面有很多li的时候，会影响页面的加载速度，影响性能。
时间委托就很好的解决了这个问题，它会提高性能。提高网页的加载速度，这是他的第一个优点。
js代码
window.onload=function(){
var oUl=document.getElementById('ul');
var aLI=oUl.children;
oUl.onclick=function(ev){
var oEvent=ev||event;
var oTarget=oEvent.srcElemet||oEvent.target;
if(oUl.tagName=='LI'){
oTarget.style.background='red';
}
};
};
这里我们需要用到事件源 即事件的源头，要操作的元素就是事件得源头
oEvent.srcElement 不兼容ff
oEvent.target IE8报undefined
tagName 找到要改变的标签名
除了可以提升性能外，事件委托还有另外一个优点，可以给未来的元素添加事件。
有一个输入框，一个按钮。当点击按钮的时候，在底下可以添加留言
html代码
<input type="text" id="text">
<input type="button" id="btn" value="按钮">
<ul id="ul">
<li>111</li>
<li>222</li>
</ul>
不用事件委托时的js代码：
window.onload=function(){
var oBtn=document.getElementById("btn");
var oTxt=document.getElementById("text");
var oUl=document.getElementById("ul");
var aLi=oUl.getElementsByTagname("li");
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
alert(this.innerHTML);
};
}
oBtn.onclick=function(){
var oLi=createElement("li");
oLi.innerHTML=oTxt.value;
oUl.appendChild(oLi);
};
};
不用事件委托时，弹出的innerHTML只是已有的li的内容。而新创建的li的内容是取不到的，因为for循环已经执行完毕。
用时间委托是的js代码
oBtn.onclick=function(){
var oLi=createElement("li");
oLi.innerHTML=oTxt.value;
oUl.appendChild(oLi);
};
oUl.onclick=function(ev){
oEvent=ev||event;
oTarget=oEvent.srcElement||oEvent.target;
if(oTarget.tagName=='LI'){
alert(0Target.innerHTML);
}
};
事件委托以后，可以轻而易举的拿到每一个li的innerHTML
据此可以知道事件委托可以给未来的元素添加事件。
