您好,登錄后才能下訂單哦!
這篇文章主要介紹了JS中如何實(shí)現(xiàn)事件委托,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
事件委托(也叫事件代理),其實(shí)這個問題也簡單,要想弄明白事件委托,我們先要把事件冒泡的機(jī)制搞清楚。舉個事件冒泡的例子:
<ul> <li>點(diǎn)擊</li> </ul> <script> var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.addEventListener('click', function(){ alert('我是ul,我被點(diǎn)擊了'); }, false); li.addEventListener('click', function(){ alert('我是li,我被點(diǎn)擊了'); }, false); </script>
在這段代碼中,當(dāng)我們點(diǎn)擊li的時候出發(fā)了li的click事件,但是在這時,ul的click事件也被觸發(fā)了,這就是事件的冒泡。搞明白這個之后,我們就可以來說事件委托了,既然事件能從子元素(li)冒泡的父元素(ul)身上,那么我們就可以給ul自己加一個click事件,把所有l(wèi)i的事件都委托給了我們的父級(ul)身上,可能到這里有些朋友還是不明白這個事件委托到底有什么用,我們在舉一個事件委托的實(shí)例來說明一下:
<ul> <li>點(diǎn)擊1</li> <li>點(diǎn)擊2</li> <li>點(diǎn)擊3</li> <li>點(diǎn)擊4</li> <li>點(diǎn)擊5</li> </ul> <script> //使用事件委托的代碼 var ul=document.getElementsByTagName('ul')[0]; ul.addEventListener('click', function(e){ alert(e.target.innerHTML); }, false); //不使用事件委托,循環(huán)給li添加click事件 var li=document.getElementsByTagName('li') for(var i=0;i<li.length;i++){ li[i].onclick=function(){ alert(this.innerHTML); } } </script>
我們以上代碼把事件委托給了ul,只給ul增加點(diǎn)擊事件,在瀏覽器中運(yùn)行點(diǎn)擊對應(yīng)的li會彈出li對應(yīng)的innerHTML
,這個function(e){};
中的e這個參數(shù)實(shí)際上就是當(dāng)前我們點(diǎn)擊li時,系統(tǒng)傳給我們的一些事件信息,e.target
實(shí)際上指的就是當(dāng)前我們點(diǎn)擊的這個li,在這里我們每次彈出的都是當(dāng)前點(diǎn)擊對象的innerHTML
,這就是一個簡單的事件委托的案例。
而事件委托對于我們優(yōu)化代碼意義是非常大的,我們都知道,頻繁的dom操作是非常耗費(fèi)性能的,現(xiàn)在ul里邊是5個li,我們假如不用事件委托實(shí)現(xiàn)上面代碼所作的事情,就需要用for循環(huán),給每個li都寫一個click事件,這樣一來dom操作就比較多了,如果是10個li呢,100個甚至更多呢,單不說dom操作影響的性能,li過多for循環(huán)自身就會占用大量的事件。如果利用事件委托,既避免了for循環(huán)耗費(fèi)的性能,又省去了繁多的dom操作耗費(fèi)的性能。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JS中如何實(shí)現(xiàn)事件委托”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。