码迷,mamicode.com
首页 > 其他好文 > 详细

事件委托(事件代理)的原理以及优缺点是什么?

时间:2017-01-10 16:03:13      阅读:369      评论:0      收藏:0      [点我收藏+]

标签:code   注册   false   add   tac   attach   else   原理   list   

事件委托原理:事件冒泡机制。
优点:1.可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适
缺点:事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

看下面的例子:
 1 <ul id="ul1">
 2     <li>111</li>
 3     <li>222</li>
 4     <li>333</li>
 5 </ul>
 6 
 7 <script>
 8     var oUl1 = document.getElementById(‘ul1‘);
 9     myAddEvent(oUl1,‘click‘,function(e){
10         var e = e || window.event;
11         var target = e.target || e.srcElement;
12         if(target.nodeName === ‘LI‘){
13             alert(target.innerHTML);
14             target.style.background = ‘red‘;
15         }
16     });
17     // 事件绑定封装成js函数
18     function myAddEvent(obj, ev, fn){
19         if(obj.attachEvent){ // ie
20             obj.attachEvent(‘on‘+ev, fn);
21         }else{
22             obj.addEventListener(ev, fn, false);
23         }
24     }
25     
26     
27 </script>

 

事件委托(事件代理)的原理以及优缺点是什么?

标签:code   注册   false   add   tac   attach   else   原理   list   

原文地址:http://www.cnblogs.com/xiayu25/p/6269652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!