国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

DOM 的各種事件為豐富的交互提供了可能，在現(xiàn)在的 web 應(yīng)用程序中，事件處理程序越來越多，越來越復(fù)雜，頁(yè)面中隨處可見的事件監(jiān)聽已經(jīng)司空見慣，但這引出了一個(gè)性能的問題，事件監(jiān)聽得越多，頁(yè)面運(yùn)行性能就越差。主要原因來自兩個(gè)方面：1. 每添加一個(gè)事件監(jiān)聽，載入頁(yè)面時(shí)都會(huì)增加一次對(duì)被監(jiān)聽節(jié)點(diǎn)的訪問，這無疑增加了頁(yè)面完全準(zhǔn)備就緒所需的時(shí)間；2. 每一個(gè)事件監(jiān)聽函數(shù)都會(huì)占用內(nèi)存，而 JavaScript 并不具備分配內(nèi)存的權(quán)利，有限的內(nèi)存如果被事件監(jiān)聽函數(shù)占用得越多，頁(yè)面性能下降得也越多。

假如有下面的一個(gè)無序列表，需要在每一個(gè) li 被點(diǎn)擊之后添加或移除一個(gè)名為 'active' 的 class 用以標(biāo)記該項(xiàng)為紅色或還原。

<ul id="list">
	<li>list 1</li>
	<li>list 2</li>
	<li>list 3</li>
	<li>list 4</li>
	<li>list 5</li>
</ul>

傳統(tǒng)監(jiān)聽方法：

$('#list li').click(function(){
	$(this).toggleClass('active');
});

在上面的代碼中通過 jQuery 的選擇器，找到了這個(gè)無序列表中的每一個(gè) li 元素，并為其綁定了 click事件，代碼看上去很簡(jiǎn)單，但實(shí)際上 $('#list li') 返回了一個(gè)數(shù)組，在這個(gè)數(shù)組中包含了 5 個(gè)上面的 li 元素，然后通過迭代為這5 個(gè)元素分別綁定了一個(gè)事件處理函數(shù)，這意味著當(dāng)這段 JavaScript 代碼被執(zhí)行過后，內(nèi)存中多了 5 個(gè)對(duì)象。

使用事件委托：

事件委托的原理是事件冒泡，這個(gè)過程大致如下圖所示：

圖中右邊部分 (Bubbling Phase)即為事件冒泡的過程，當(dāng)元素的一個(gè)事件被觸發(fā)后，這個(gè)事件會(huì)像冒泡一樣一直向上(父元素)傳遞，直到 document ( Firefox,Chrome ,Safari 冒泡到 window)，事件委托的核心就是監(jiān)聽一個(gè) DOM中更高層、更不具體的元素，等到事件冒泡到這個(gè)不具體元素時(shí)，通過 event 對(duì)象的 target屬性來獲取觸發(fā)事件的具體元素。下面的代碼使用了事件委托的方法改進(jìn)了這個(gè)事件處理函數(shù)。

$('#nav').click(function(event){
	var target = event.target;
	$(target).toggleClass('active');
});

在這里，被監(jiān)聽的元素變成了 ul，即剛才所說的不具體的元素。由于事件的冒泡，在每一個(gè) li 上的 click，都會(huì)觸發(fā) ul的事件監(jiān)聽，然后通過 event 中的 target 這個(gè)指向事件目標(biāo)(具體元素)的屬性獲取到被點(diǎn)擊到的那個(gè) li ，最后切換 class'active' 的有無，任務(wù)完成。

通過使用事件委托這個(gè)技巧，達(dá)到相同的目標(biāo)只監(jiān)聽了一個(gè)元素的事件，同樣也只添加了 1 個(gè)事件處理函數(shù)。瀏覽器為添加事件所要查找并引用的DOM 更少，由于監(jiān)聽函數(shù)變少，內(nèi)存的使用也同時(shí)減少了。如果頁(yè)面上需要添加事件的元素很多，事件委托對(duì)于頁(yè)面性能改善的作用是不可小視的。