简述事件委托(事件代理)
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
举个生活中的例子,中午出去买饭,你想吃黄焖鸡,甲也是,乙也是,其他人都是,那你们就可以石头剪刀布让一个人去帮大家一块买来,省时又省力
例如:我要给每个li标签都加一个事件
<ul id="box">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
(1)、常规思路利用for循环的机制添加
window.onload = function(){
var box = document.getElementById("box");
var li = box.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
alert(123);
}
}
}
弊端:如果li标签有100个,那就要循环遍历100次,这样操作DOM次数太多 极大的消耗性能
(2)、利用事件委托来添加事件
原理:
Event对象为我们提供了一个属性叫“target”,它可以返回事件的目标节点(也称‘事件源’)。即“target”可以表示当前事件操作的DOM。这里注意一下兼容性问题:IE浏览器用event.srcElement,其他浏览器用ev.target;
但是你此时只是获取了当前节点的位置,怎么获取标签名呢?可以用nodeName来获取具体标签名(这里返回是大写),然后用toLowerCase()方法来转成小写
window.onload = function(){
var box = document.getElementById("box");
box.onclick = function(ev){
var ev = ev || window.event; // 兼容IE
var target = ev.target || ev.srcElement; // 兼容IE
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
}
}
}
优点:这样即使DOM数量很多,但每次只执行一次DOM操作,将大大减少DOM的操作,优化性能
这就是事件委托(事件代理)