事件委托原理:事件冒泡機制。
優點: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>