javascript事件委托的用法及其好處簡析
本文為大家簡單介紹了javascript事件委托的用法及其好處,供大家參考,具體內(nèi)容如下
事件委托:利用冒泡的原理,把事件加到父級上,觸發(fā)執(zhí)行效果,
好處:提高性能,新添加的元素還會有之前的事件。
event對象:事件源,不管在哪個事件中,只要你操作的那個元素就是事件源
獲取事件源:
IE:window.event.srcElement
標(biāo)準(zhǔn)下:event.target target.nodeName來判斷是哪個標(biāo)簽
代碼應(yīng)用如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); var oBtn=document.getElementById('btn1'); var iNow=5; //事件源的方法依然保留父級事件! oUl.onmouseover=function(ev) { var ev=ev||window.event; var target=ev.target||ev.srcElement; if(target.nodeName.toLowerCase()=='li') { target.style.background='red'; } } oUl.onmouseout=function(ev) { var ev=ev||window.event; var target=ev.target||ev.srcElement; if(target.nodeName.toLowerCase()=='li') { target.style.background=''; } } oBtn.onclick=function() { iNow++; var oLi=document.createElement('li'); oLi.innerHTML=111*iNow; oUl.appendChild(oLi); } } </script> </head> <body > <input type="button" value="添加" id='btn1'> <ul id='ul1'> <li>11111</li> <li>22222</li> <li>3333333</li> <li>44444444</li> <li>66666666</li> </ul> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
基于layer.js實現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息
這篇文章主要介紹了基于layer.js實現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息,需要的朋友可以參考下2017-05-05分步解析JavaScript實現(xiàn)tab選項卡自動切換功能
這篇文章主要分步解析JavaScript實現(xiàn)tab選項卡自動切換功能代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01JavaScript 模式之工廠模式(Factory)應(yīng)用介紹
工廠模式也是對象創(chuàng)建模式之一,它通常在類或類的靜態(tài)方法中去實現(xiàn),本文將詳細(xì)介紹JavaScript 工廠模式2012-11-11JavaScript this調(diào)用規(guī)則說明
我希望通過這些來使你們理解各種函數(shù)調(diào)用方式的不同,讓你的JavaScript代碼遠(yuǎn)離bugs。2010-03-03Javascript基礎(chǔ)教程之比較null和undefined值
這篇文章主要介紹了Javascript基礎(chǔ)教程之比較null和undefined值的相關(guān)知識,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05