亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript給事件委托批量添加事件監(jiān)聽詳細(xì)流程

 更新時間:2021年10月19日 11:29:07   作者:daixiangcn  
事件委托,一般來講,會把一個或者一組元素的事件委托到它的父層或者更外層元素上,真正綁定事件的是外層元素,當(dāng)事件響應(yīng)到需要綁定的元素上時,會通過事件冒泡機制從而觸發(fā)它的外層元素的綁定事件上,然后在外層元素上去執(zhí)行函數(shù)

1.什么是事件委托

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

  • 減少DOM操作,提高性能。
  • 隨時可以添加子元素,添加的子元素會自動有相應(yīng)的處理事件。

2.事件委托的原理

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

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

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

在這里插入圖片描述

結(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)添加點擊事件,內(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表示用戶真正點擊到的那個元素。

到此這篇關(guān)于JavaScript給事件委托批量添加事件監(jiān)聽詳細(xì)流程的文章就介紹到這了,更多相關(guān)JavaScript 事件委托內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)上拉加載功能

    微信小程序?qū)崿F(xiàn)上拉加載功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上拉加載功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • JavaScript 事件對內(nèi)存和性能的影響

    JavaScript 事件對內(nèi)存和性能的影響

    本文主要介紹了JavaScript 事件對內(nèi)存和性能的影響。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域

    JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域

    這篇文章主要介紹了JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域,作者通過建立一個代理來同步高度調(diào)整,需要的朋友可以參考下
    2016-02-02
  • javascript 獲取圖片尺寸及放大圖片

    javascript 獲取圖片尺寸及放大圖片

    獲取圖片尺寸(不設(shè)置寬高)及放大圖片:利用了IE的私有屬性防止圖片放大失真嚴(yán)重!感興趣的朋友可以參考下
    2013-09-09
  • 用javascript關(guān)閉本窗口不彈出詢問框的方法

    用javascript關(guān)閉本窗口不彈出詢問框的方法

    ie中用close關(guān)閉非open打開的窗口時回彈出一個對話框詢問用戶,怎么去掉這個框呢,在window.close之前加上window.top.opener = null就可以了
    2014-09-09
  • 純js實現(xiàn)打字機效果

    純js實現(xiàn)打字機效果

    這篇文章主要為大家詳細(xì)介紹了純js實現(xiàn)打字機效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • JavaScript實現(xiàn)手寫原生任務(wù)定時器

    JavaScript實現(xiàn)手寫原生任務(wù)定時器

    定時器顧名思義就是在某個特定的時間去執(zhí)行一些任務(wù),現(xiàn)代的應(yīng)用程序早已不是以前的那些由簡單的增刪改查拼湊而成的程序了,高復(fù)雜性早已是標(biāo)配,而任務(wù)的定時調(diào)度與執(zhí)行也是對程序的基本要求了。本文將利用JavaScript手寫原生任務(wù)定時器,需要的可以參考一下
    2022-03-03
  • 使用JavaScript動態(tài)設(shè)置樣式實現(xiàn)代碼及演示動畫

    使用JavaScript動態(tài)設(shè)置樣式實現(xiàn)代碼及演示動畫

    使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn),本文有利于鞏固你js與css方面的知識,感興趣的你可以了解下哦,希望本文對你有所幫助
    2013-01-01
  • js實現(xiàn)拖動滑塊效果

    js實現(xiàn)拖動滑塊效果

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)拖動滑塊效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 提高團隊代碼質(zhì)量利器ESLint及Prettier詳解

    提高團隊代碼質(zhì)量利器ESLint及Prettier詳解

    這篇文章主要為大家介紹了提高團隊代碼質(zhì)量利器ESLint及Prettier使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11

最新評論