事件委托原理:事件冒泡機制。
什么是事件委托:
事件委托——給父元素綁定事件穴肘,用來監(jiān)聽子元素的冒泡事件,并找到是哪個子元素的事件评抚。
優(yōu)點:1.可以大量節(jié)省內(nèi)存占用伯复,減少事件注冊。比如ul上代理所有l(wèi)i的click事件就很不錯邢笙。
2.可以實現(xiàn)當新增子對象時,無需再對其進行事件綁定氮惯,對于動態(tài)內(nèi)容部分尤為合適
缺點:事件代理的常用應(yīng)用應(yīng)該僅限于上述需求,如果把所有事件都用事件代理妇汗,可能會出現(xiàn)事件誤判债鸡。即本不該被觸發(fā)的事件被綁定上了事件铛纬。
<li id="ul1>111</li>
<li>222</li>
<li>333</li>
? ? var oUl1 = document.getElementById('ul1');
? ? myAddEvent(oUl1,'click',function(e){
? ? ? ? var e = e || window.event;
? ? ? ? var target = e.target || e.srcElement;
? ? ? ? if(target.nodeName.toLowerCase() == 'li'){
? ? ? ? ? ? alert(target.innerHTML);
? ? ? ? ? ? target.style.background = 'red';
? ? ? ? }
? ? });
? ? // 事件綁定封裝成js函數(shù)
? ? function myAddEvent(obj, ev, fn){
? ? ? ? if(obj.attachEvent){ // ie
? ? ? ? ? ? obj.attachEvent('on'+ev, fn);
? ? ? ? }else{
? ? ? ? ? ? obj.addEventListener(ev, fn, false);
? ? ? ? }
? ? }