事件委托也叫事件代理，简单点说就是，把事件绑定到父级上，监听子元素的冒泡事件。至于什么是事件冒泡有疑问的请点击js中的事件，其中有对事件冒泡的详细解释。在使用事件委托的时候我们要知道的知识点有什么呢？
1、在利用事件委托的时候，我们还必须要知道一个概念：事件对象下的事件源
事件源：在事件中，当前操作的那个元素就是事件源。比如我们点击a标签发生onclick事件时，事件源就是a标签，当点击li发生onclick事件时，那么事件源就是li
怎么获取事件源呢？
在ie下：window.event.srcelement;
标准下：event.target
兼容性处理：var target = ev.target||ev.srcelement
2、找到当前元素的标签名：nodename（是大写的要利用到tolowercase()方法将其转化为小写）
写了这么多那么利用事件委托有什么好处呐？
1、可以提高性能
2、新添加的元素也会有之前的事件
至于体现在哪里，下面就用例子来带你来感受一下呗
html代码
<ul id="ul1">
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
我们想要的效果就是当鼠标移入li时让对应的li背景颜色变为红色，移出变为原来的颜色
如果利用一般的写法是这样的
<script>
var oul = document.queryselector('#ul1');
var ali = oul.queryselectorall('li');
for(var i=0; i<ali.length; i++){
ali[i].onmouseover = function(){
this.style.background = 'red';
}
ali[i].onmouseout = function(){
this.style.background = '';
}
}
</script>
再看看利用事件委托怎么做
<script>
var oul = document.queryselector('#ul1');
oul.onmouseover = function(ev){
var ev = ev||event;//兼容性处理
var target = ev.target||ev.srcelement;
if(target.nodename.tolowercase()=='li'){
target.style.background ='red';
}
}
oul.onmouseout = function(ev){
var ev = ev||event;
var target = ev.target||ev.srcelement;
if(target.nodename.tolowercase()=='li'){
target.style.background ='';
}
}
</script>
上面的方法我们需要为每一个li都绑定一个点击事件，而下面的方法我们只需要为父级绑定一个点击事件，li个数少的时候还好说，如果li有很多，可想而知，事件委托可以大大的提高性能
例子2、
html代码
<ul id="ul1">
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
<button id="btn">按钮</button>
我们希望点击按钮的时候，在ul里面再添加li，并且，鼠标每次移入时，li的背景颜色改变，移出时背景颜色变回来，我们知道如果用平常的方法，我们每添加一个li都要为它再添加一个移入移出事件，有多麻烦，你自己试试就知道了，但是如果我么用事件委托就不需要再为其每次都添加了，看下面代码（第一种想必大家都知道怎么做就不再写了，下面只写利用事件委托怎么写）
<script>
var oul = document.queryselector('#ul1');
var obtn = document.queryselector('#btn');
oul.onmouseover = function(ev){
var ev = ev||event;
var target = ev.target||ev.srcelement;
if(target.nodename.tolowercase()=='li'){
target.style.background ='red';
}
}
oul.onmouseout = function(ev){
var ev = ev||event;
var target = ev.target||ev.srcelement;
if(target.nodename.tolowercase()=='li'){
target.style.background ='';
}
}
obtn.onclick = function(){
var ali = document.createelement('li');
ali.innerhtml = '1111111111111';
oul.appendchild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>
看完上面的是不是觉得事件委托真的很好用呢？所以赶紧用起来吧！
相关推荐：
js事件委托实例详解
以上就是js事件委托实例总结的详细内容。