這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹JavaScript事件委托的原理和使用方法，文章內(nèi)容步步緊湊，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、成都網(wǎng)頁設(shè)計(jì)、微信小程序定制開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、重慶APP開發(fā)公司是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

如今的JavaScript技術(shù)界里最火熱的一項(xiàng)技術(shù)應(yīng)該是‘事件委托(event delegation)’了。使用事件委托技術(shù)能讓你避免對(duì)特定的每個(gè)節(jié)點(diǎn)添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會(huì)分析從子元素冒泡上來的事件，找到是哪個(gè)子元素的事件?；靖拍罘浅：?jiǎn)單，但仍有很多人不理解事件委托的工作原理。這里我將要解釋事件委托是如何工作的，并提供幾個(gè)純JavaScript的基本事件委托的例子。

假定我們有一個(gè)UL元素，它有幾個(gè)子元素：

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

我們還假設(shè)，當(dāng)每個(gè)子元素被點(diǎn)擊時(shí)，將會(huì)有各自不同的事件發(fā)生。你可以給每個(gè)獨(dú)立的li元素添加事件監(jiān)聽器，但有時(shí)這些li元素可能會(huì)被刪除，可能會(huì)有新增，監(jiān)聽它們的新增或刪除事件將會(huì)是一場(chǎng)噩夢(mèng)，尤其是當(dāng)你的監(jiān)聽事件的代碼放在應(yīng)用的另一個(gè)地方時(shí)。但是，如果你將監(jiān)聽器安放到它們的父元素上呢？你如何能知道是那個(gè)子元素被點(diǎn)擊了？

簡(jiǎn)單：當(dāng)子元素的事件冒泡到父ul元素時(shí)，你可以檢查事件對(duì)象的target屬性，捕獲真正被點(diǎn)擊的節(jié)點(diǎn)元素的引用。下面是一段很簡(jiǎn)單的JavaScript代碼，演示了事件委托的過程：

// 找到父元素，添加監(jiān)聽器...
document.getElementById("parent-list").addEventListener("click",function(e) {
	// e.target是被點(diǎn)擊的元素!
	// 如果被點(diǎn)擊的是li元素
	if(e.target && e.target.nodeName == "LI") {
		// 找到目標(biāo)，輸出ID!
		console.log("List item ",e.target.id.replace("post-")," was clicked!");
	}
});

第一步是給父元素添加事件監(jiān)聽器。當(dāng)有事件觸發(fā)監(jiān)聽器時(shí)，檢查事件的來源，排除非li子元素事件。如果是一個(gè)li元素，我們就找到了目標(biāo)！如果不是一個(gè)li元素，事件將被忽略。這個(gè)例子非常簡(jiǎn)單，UL和li是標(biāo)準(zhǔn)的父子搭配。讓我們?cè)囼?yàn)一些差異比較大的元素搭配。假設(shè)我們有一個(gè)父元素p，里面有很多子元素，但我們關(guān)心的是里面的一個(gè)帶有”classA” CSS類的A標(biāo)記：

// 獲得父元素p, 添加監(jiān)聽器...
document.getElementById("myp").addEventListener("click",function(e) {
	// e.target是被點(diǎn)擊的元素
	if(e.target && e.target.nodeName == "A") {
		// 獲得CSS類名
		var classes = e.target.className.split(" ");
		// 搜索匹配!
		if(classes) {
			// For every CSS class the element has...
			for(var x = 0; x < classes.length; x++) {
				// If it has the CSS class we want...
				if(classes[x] == "classA") {
					// Bingo!
					console.log("Anchor element clicked!");

					// Now do something here....

				}
			}
		}

	}
});

上面這個(gè)例子中不僅比較了標(biāo)簽名，而且比較了CSS類名。雖然稍微復(fù)雜了一點(diǎn)，但還是很具代表性的。比如，如果某個(gè)A標(biāo)記里有一個(gè)span標(biāo)記，則這個(gè)span將會(huì)成為target元素。這個(gè)時(shí)候，我們需要上溯DOM樹結(jié)構(gòu)，找到里面是否有一個(gè) A.classA 的元素。

因?yàn)榇蟛糠殖绦騿T都會(huì)使用jQuery等工具庫來處理DOM元素和事件，我建議大家都使用里面的事件委托方法，因?yàn)檫@里工具庫里都提供了高級(jí)的委托方法和元素甄別方法。

看完上述內(nèi)容，你們對(duì)JavaScript事件委托的原理和使用方法大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：JavaScript事件委托的原理和使用方法-創(chuàng)新互聯(lián)
URL鏈接：http://jinyejixie.com/article20/djcsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、企業(yè)建站、云服務(wù)器、用戶體驗(yàn)、網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)