快捷導(dǎo)航

JS中的事件委托實(shí)例淺析

更新時(shí)間：2018年03月22日 08:54:10 作者：badmoonc

這篇文章主要介紹了JS中的事件委托,結(jié)合實(shí)例形式簡單分析了javascript事件委托的概念、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS中的事件委托。分享給大家供大家參考，具體如下：

事件委托（也叫事件代理），其實(shí)這個(gè)問題也簡單，要想弄明白事件委托，我們先要把事件冒泡的機(jī)制搞清楚。舉個(gè)事件冒泡的例子：

<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的時(shí)候出發(fā)了li的click事件，但是在這時(shí)，ul的click事件也被觸發(fā)了，這就是事件的冒泡。搞明白這個(gè)之后，我們就可以來說事件委托了，既然事件能從子元素(li)冒泡的父元素(ul)身上，那么我們就可以給ul自己加一個(gè)click事件，把所有l(wèi)i的事件都委托給了我們的父級(ul)身上，可能到這里有些朋友還是不明白這個(gè)事件委托到底有什么用，我們在舉一個(gè)事件委托的實(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會(huì)彈出li對應(yīng)的innerHTML，這個(gè)function(e){};中的e這個(gè)參數(shù)實(shí)際上就是當(dāng)前我們點(diǎn)擊li時(shí)，系統(tǒng)傳給我們的一些事件信息,e.target實(shí)際上指的就是當(dāng)前我們點(diǎn)擊的這個(gè)li，在這里我們每次彈出的都是當(dāng)前點(diǎn)擊對象的innerHTML，這就是一個(gè)簡單的事件委托的案例。

而事件委托對于我們優(yōu)化代碼意義是非常大的，我們都知道，頻繁的dom操作是非常耗費(fèi)性能的，現(xiàn)在ul里邊是5個(gè)li，我們假如不用事件委托實(shí)現(xiàn)上面代碼所作的事情，就需要用for循環(huán)，給每個(gè)li都寫一個(gè)click事件，這樣一來dom操作就比較多了，如果是10個(gè)li呢，100個(gè)甚至更多呢，單不說dom操作影響的性能，li過多for循環(huán)自身就會(huì)占用大量的事件。如果利用事件委托，既避免了for循環(huán)耗費(fèi)的性能，又省去了繁多的dom操作耗費(fèi)的性能。

PS：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: