事件委托也称事件代理,JavaScript高程上讲:事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理这一类型的所有事件。
举个栗子,我有一个ul标签,下面有很多li标签,每个li标签都需要添加事件,难道我们要获取每个li然后在添加事件吗? 这样太浪费内存了,也不利于网页性能优化,我们要尽可能减少dom操作,所以我们能不能只给ul添加点击事件,然后利用事件冒泡,这样每个li标签都有事件了,
何为冒泡
我的页面是这样一个结构div > ul >( li >a)*20,即有20个li标签,每个li下面又有一个a标签,如果点击a标签,事件就会向外递进(a->li->ul->div),依照这个特性,我们是不是可以只给div添加点击事件,当点击a、li时的时候就会冒泡到div,从而执行div的点击事件,这就是事件委托,委托给他们的父辈元素(emmmm不知道我讲清楚了没有~~(>_<)~~);
实践
var Ul = document.getElementsByTagName("ul")[0];
Ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement; //srcElement是IE的说法
if(target.nodeName.toLowerCase() == 'li'){
alert(target.innerHTML);
}
}
<ul>
<li><a>111</a></li>
<li><a>222</a></li>
<li><a>333</a></li>
<li><a>444</a></li>
</ul>
上面代码就是给ul添加一个点击事件,如果被点击的对象nodeName是li,即被点击的是li标签则输出当前li的innerHTML。
最常见的是每个li标签执行的事件不同,这又该怎么解决呢?
我们可以给每个li标签添加类名,或者id,判断当前对象的类名或id,当被操作的li标签是这个类名或id则执行对应的函数,如果不是则不执行这个函数。