JavaScript給事件委托批量添加事件監聽詳細流程

Posted on by

1.什麼是事件委托

事件委托：利用事件冒泡的特性，將本應該註冊在子元素上的處理事件註冊在父元素上，這樣點擊子元素時發現其本身沒有相應事件就到父元素上尋找作出相應。這樣做的優勢有：

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

2.事件委托的原理

事件委托是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然後逐步向上傳播事件。
舉個例子：頁面上有這麼一個節點樹，div>ul>li>a;比如給最裡面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼我們給最外面的div加點擊事件，那麼裡面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委托，委托它們父級代為執行事件。

3.事件委托的實現

通過一個案例來實現事件委托。
案例：批量添加事件監聽。使用JavaScript實現：點擊哪個li，哪個li元素的背景變紅。

在這裡插入圖片描述

結構層+樣式層代碼：

<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：循環添加事件

不使用事件委托，使用for循環添加點擊事件，內存消耗大。

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表示用戶真正點擊到的那個元素。

到此這篇關於JavaScript給事件委托批量添加事件監聽詳細流程的文章就介紹到這瞭,更多相關JavaScript 事件委托內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：