JavaScript事件委托技術(shù)實例分析
更新時間：2015年02月06日 10:01:04 作者：kooky798
這篇文章主要介紹了JavaScript事件委托技術(shù),實例分析了事件委托技術(shù)的原理、適用場合及用法實例,需要的朋友可以參考下
本文實例分析了JavaScript事件委托技術(shù)。分享給大家供大家參考。具體分析如下：
如果一個整體頁面里有大量的按鈕.我們就要為每一個按鈕綁定事件處理程序.這樣就會影響性能了.
首先每個函數(shù)都是對象,對象就會占用很多內(nèi)存.內(nèi)存中的對象越多,性能就越差.
其次,dom訪問次數(shù)增多,就會導(dǎo)致延遲加載頁面.事實上,從如何來利用好事件處理程序,還是有很好的解決方案的.
事件委托：
對事件處理程序過多的問題解決的方案就是事件委托技術(shù).
事件委托技術(shù)利用了事件冒泡.只需指定一個事件處理程序.
我們可以為某個需要觸發(fā)事件的父元素來綁定事件處理程序.
<ul id="mylist"> <li id="li_1">sdsdsd</li> <li id="li_2">sdsdsd</li> <li id="li_3">sdsdsd</li> </ul>
現(xiàn)在我們要為這3個li綁定事件處理程序..
只需要在ul綁定事件處理程序.
obj.eventHandler($("mylist"),"click",function(e){
e = e || window.event;
switch(e.target.id){
//大家應(yīng)該還記得target是事件目標(biāo),
//只要點擊了事件的目標(biāo)元素就會彈出相應(yīng)的alert.
case "li_1":
alert("li_1");
break;
case "li_2":
alert("li_2");
break;
case "li_3":
alert("li_3");
break
}
})
如果在一個復(fù)雜的web應(yīng)用程序中,.這種事件委托是非常實用的.
如果不采用這種方式的話,一個一個去綁定那就是數(shù)不清的事件處理程序.
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
滾動至頁頂，比以前的直接跳到頁頂效果好很多，正的很不錯2008-09-09
這篇文章主要介紹了Bootstrap4如何定制自己的顏色和風(fēng)格，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
網(wǎng)絡(luò)復(fù)制內(nèi)容時常用的正則+editplus
有時侯我們在拷貝網(wǎng)頁上的內(nèi)容的時候，總是有一些，開頭的數(shù)字，需要替換掉2006-11-11
JavaScript實現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能,涉及javascript數(shù)字、字符串等運算與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關(guān)于js中事件對象的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了antd upload控件的data參數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript代碼調(diào)試方法實例小結(jié)
這篇文章主要介紹了JavaScript代碼調(diào)試方法,結(jié)合實例形式總結(jié)分析了JavaScript錯誤信息的處理與代碼調(diào)試相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了JavaScript引用類型Array,結(jié)合實例形式較為詳細的分析了JavaScript數(shù)組相關(guān)的創(chuàng)建、檢測、轉(zhuǎn)換、排序、棧、隊列、引用等各種常見操作技巧,需要的朋友可以參考下2018-07-07
BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展
Select下拉框的問題，想在選擇一個選項后，前臺顯示做出變動，并且知道選擇的是第幾個選項。 怎么解決這個問題呢？下面小編給大家?guī)砹薆ootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展，需要的朋友參考下吧2016-11-11
SPA的興起，促使我們更加關(guān)注與內(nèi)存相關(guān)的JavaScript編碼實踐。如果應(yīng)用使用的內(nèi)存越來越多，就會嚴(yán)重影響性能，甚至導(dǎo)致瀏覽器的崩潰。下面就來看看JavaScript中常見的內(nèi)存泄漏以及如何避免內(nèi)存泄漏2022-05-05