事件委託(事件代理)的原理以及優缺點是什麼?

事件委託原理:事件冒泡機制。
優勢: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>
相關文章
相關標籤/搜索