事件代理又叫事件委托，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
为什么要用事件委托：
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与回流的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
事件委托的原理：
事件委托的原理就是利用事件的冒泡原理实现的，事件触发的过程就是从document开始一级一级的找到触发事件的元素，当找到要触发的事件的元素时，事件会冒泡就是从触发事件元素到document的过程，这个过程会触发所有同事件。
事件委托的实现：
<ul id="wrap">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
一般的事件绑定，实现实现功能是点击li，弹出123
window.onload = function(){
var oUl = document.getElementById("wrap");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(123);
}
}
}
上面的代码很简单，很多人都是这么实现的，首先找到ul，然后再遍历li，然后点击li的时候，又找一次目标li的位置，才能执行最后的操作，每次都要找li.
事件委托的写法
window.onload = function(){
var oUl = document.getElementById("wrap");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
Jq中的事件代理写法
$("ul").delegate("li","click",function(){
alert('123');
});
$("ul").on("click","li",function(){
alert("123");
})
$(selector).delegate(childSelector,event,data,function)
$(selector).on(event,childSelector,data,function,map) //1.7版本以上
这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较。
通常遇到在DOM结构中通过dom操作添加的新的子节点并不会绑定原来的事件
<body>
<ul class="ct">
<li>点击显示到控制台1</li>
<li>点击显示到控制台2</li>
<li>点击显示到控制台3</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容" />
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
</body>
<script type="text/javascript">
var text = document.getElementsByClassName('ipt-add-content')[0];
var addFirst = document.getElementById('btn-add-start');
var addEnd = document.getElementById('btn-add-end');
var ul = document.getElementsByClassName('ct')[0];
var lis = ul.getElementsByTagName('li');
addFirst.onclick = function() {
var li = document.createElement('li');
li.innerText = text.value;
ul.insertBefore(li, ul.firstChild);
};
addEnd.onclick = function() {
var li = document.createElement('li');
li.innerText = text.value;
ul.appendChild(li);
};
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(this.innerText)
};
}
</script>
但通过事件代理新添加的DOM节点也是可以触发父元素代理的事件的。
<script type="text/javascript">
var text = document.getElementsByClassName('ipt-add-content')[0];
var addFirst = document.getElementById('btn-add-start');
var addEnd = document.getElementById('btn-add-end');
var ul = document.getElementsByClassName('ct')[0];
addFirst.onclick = function() {
var li = document.createElement('li');
li.innerText = text.value;
ul.insertBefore(li, ul.firstChild);
};
addEnd.onclick = function() {
var li = document.createElement('li');
li.innerText = text.value;
ul.appendChild(li);
};
ul.addEventListener('click', function (e) {
console.log(e.target.innerText);
}, false);
</script>
一个更复杂的另外一个场景就是， ul > li > div > p，div占满li，p占�满div，还是给ul绑定事件，需要判断点击的是不是li（假设li里面的结构是不固定的），那么e.target就可能是p，也有可能是div，这种情况你会怎么处理呢？
<ul id="test">
<li>
<p>11111111111</p>
</li>
<li>
<div>
22222222
</div>
</li>
<li>
<span>3333333333</span>
</li>
<li>4444444</li>
</ul>
可以采用递归的方式来处理
var oUl = document.getElementById('test');
oUl.addEventListener('click',function(ev){
var target = ev.target;
while(target !== oUl ){
if(target.tagName.toLowerCase() == 'li'){
console.log('li click~');
break;
}
target = target.parentNode;
}
})
网友评论