事件委托:
就是利用事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。
原理(借鑒):
事件委托是利用事件的冒泡原理來實現(xiàn)的,何為事件冒泡呢?就是事件從最深的節(jié)點開始,然后逐步向上傳播事件,舉個例子:頁面上有這么一個節(jié)點樹,div>ul>li>a;比如給最里面的a加一個click點擊事件,那么這個事件就會一層一層的往外執(zhí)行,執(zhí)行順序a>li>ul>div,有這樣一個機制,那么我們給最外面的div加點擊事件,那么里面的ul,li,a做點擊事件的時候,都會冒泡到最外層的div上,所以都會觸發(fā),這就是事件委托,委托它們父級代為執(zhí)行事件。
eg:實現(xiàn)多個li點擊變色
js代碼:
var oUl=document.getElementById('ul1');
oUl.onclick=function(ev){
var oEvent=ev||event;
console.log(oEvent.srcElement);
console.log(oEvent.target);
var oSrc=oEvent.srcElement||oEvent.target;
if(oSrc.tagName=='LI'){//標(biāo)簽名大寫
oSrc.style.background='red';
}
};
布局:
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>