关于事件委托

首先，先来看一个例子：如微博，每一条博文都有事件，如增加、删除等！这样子的话我们每次发微博的时候就得在创建的时候把该有的事件给加上。

html代码：

<input id="txt1" type="text" value="" placeholder='输入内容'/>

<input id="btn1" type="button" value="留言" />

<ul id="ul1">

<li>aaaaaa</li>

<li>bbbb</li>

<li>cccc</li>

</ul>

js代码：

var oText = document.getElementById("txt1");

var oBtn = document.getElementById("btn1");

var oUl = document.getElementById("ul1");

var aLi = oUl.children;

oBtn.onclick = function(){

var oLi = document.createElement("li");

oLi.innerHTML = oText.value;

oUl.appendChild(oLi);

};

for(var i = 0; i < aLi.length; i++){

aLi[i].onclick = function(){

alert(this.innerHTML);

};

}

在没有了解事件委托之前，举得这样写是妥妥的！

但是，如果li很多的话，用for循环很耗性能，并且给每个li都加事件，每个li的事件很多，也是很占内存。

说到这的话，事件委托就应该的隆重的出现！

原理：事件委托也叫事件代理，它是利用事件冒泡的原理，把子集的事件加到父级上，通过父级来触发子集的执行效果。

事件委托需要用到事件源，但是不兼容！IE浏览器(chrome也适用)用ev.srcElement      高级浏览器用ev.target 

兼容写法：var oSrc = oEvent.srcElement || oEvent.target;

接下来看代码就行了

js代码：(把上面的for循环代替为以下)

oUl.onclick = function(ev){

var oEvent = ev || event;

var oSrc = oEvent.srcElement || oEvent.target;

if(oSrc.tagName == "LI"  && oSrc.className == "weibo"){    // 为什么要做判断呢！因为事件是加在UL上的，所以 点Ul里的所有元素包括Ul本身都会触发事件。

oSrc.style.background = "red";

}

};

改写之后，不仅提高了性能，节省了代码量。