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