bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

JavaScript給事件委托批量添加事件監(jiān)聽的方法是什么

本篇內(nèi)容介紹了“JavaScript給事件委托批量添加事件監(jiān)聽的方法是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有牡丹免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1.什么是事件委托

事件委托：利用事件冒泡的特性，將本應(yīng)該注冊在子元素上的處理事件注冊在父元素上，這樣點(diǎn)擊子元素時發(fā)現(xiàn)其本身沒有相應(yīng)事件就到父元素上尋找作出相應(yīng)。這樣做的優(yōu)勢有：

  • 減少DOM操作，提高性能。

  • 隨時可以添加子元素，添加的子元素會自動有相應(yīng)的處理事件。

2.事件委托的原理

事件委托是利用事件的冒泡原理來實(shí)現(xiàn)的，何為事件冒泡呢？就是事件從最深的節(jié)點(diǎn)開始，然后逐步向上傳播事件。
舉個例子：頁面上有這么一個節(jié)點(diǎn)樹，div>ul>li>a;比如給最里面的a加一個click點(diǎn)擊事件，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div，有這樣一個機(jī)制，那么我們給最外面的div加點(diǎn)擊事件，那么里面的ul，li，a做點(diǎn)擊事件的時候，都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托它們父級代為執(zhí)行事件。

3.事件委托的實(shí)現(xiàn)

通過一個案例來實(shí)現(xiàn)事件委托。
案例：批量添加事件監(jiān)聽。使用JavaScript實(shí)現(xiàn)：點(diǎn)擊哪個li，哪個li元素的背景變紅。

JavaScript給事件委托批量添加事件監(jiān)聽的方法是什么

結(jié)構(gòu)層+樣式層代碼：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        float: left;
        width: 800px;
        margin-top: 50px;
    }
    ul li {
        list-style: none;
        float: left;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin-right: 20px;
    }
    ul li:first-child {
        margin-left: 20px;
    }
</style>
<body>
	<ul id="list">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
	</ul>
</body>

3.1 方法1：循環(huán)添加事件

不使用事件委托，使用for循環(huán)添加點(diǎn)擊事件，內(nèi)存消耗大。

var oList = document.getElementById('list');
var lis = oList.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        this.style.backgroundColor = 'red';
    }
}

3.2 方法2：使用事件委托

使用事件委托。

var oList = document.getElementById('list');
oList.onclick = function (e) {
	e.target.style.backgroundColor = 'red';
}

該案例中，e.target表示用戶真正點(diǎn)擊到的那個元素。

“JavaScript給事件委托批量添加事件監(jiān)聽的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

文章題目：JavaScript給事件委托批量添加事件監(jiān)聽的方法是什么
網(wǎng)站路徑：http://vcdvsql.cn/article28/jhgdcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、App開發(fā)、標(biāo)簽優(yōu)化、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、外貿(mào)建站

廣告

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

網(wǎng)站托管運(yùn)營