简述事件委托(事件代理)

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

举个生活中的例子,中午出去买饭,你想吃黄焖鸡,甲也是,乙也是,其他人都是,那你们就可以石头剪刀布让一个人去帮大家一块买来,省时又省力

例如:我要给每个li标签都加一个事件


  • 111

  • 222

  • 333

  • 444

(1)、常规思路利用for循环的机制添加

window.onload = function(){
var box = document.getElementById("box");
var li = box.getElementsByTagName('li');
for(var i=0;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的操作,优化性能

这就是事件委托(事件代理)

你可能感兴趣的:(简述事件委托(事件代理))