JavaScript事件委託原理
阿新 • • 發佈：2021-12-08
目錄
- 一、什麼是事件委託
- 二、事件委託的原理
- 三、事件委託的作用
一、什麼是事件委託
事件委託也稱為事件代理。就是利用事件冒泡，把子元素的事件都繫結到父元素上。如果子元素阻止了事件冒泡，那麼委託就無法實現。
舉個簡單的例子：
例如快遞員有100個快遞要分別送給100個學生， 如果一個個的送花費時間較長。同時每個學生領取的時候，也需要排隊領取，也花費時間較長，應該怎樣操作呢？這時快遞員可以把100個快遞委託給班主任，班主任把這些快遞放到辦公室，同學們下課自行領取即可。這樣的話，快遞員省事，同學們領取也更方便。這個過程就是一個委託事件。
二、事件委託的原理
不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然後利用冒泡原理影響設定每個子節點。
我們再來看看在具體的程式中是如何實現的吧！
比如，我們現在有一個無序列表，在無序列表裡面有五個li,我們想要給每個li新增一個點選事件，這個時候，我們常規操作是通過迴圈給每個li新增http://www.cppcns.com點選事件。
程式碼如下所示：
<body>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
</ul>
<script>
var li = document.querySelectorAll('li');
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
執行結果為：
這種方法的確可以實現我們的點選操作，但是這個過程中，由於每次都要給li新增點選事件，造成訪問DOM的次數過多，會延iknik長整個頁面的互動就緒時間。
所以，這裡，我們就可以用到事件委託，即給ul註冊點選事件，然後利用事件物件的 target 來找到當前點選的 li，因為點選li，事件會冒泡到ul上，ul有註冊事件，就會觸發事件監聽器。
實現程式碼為：
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
e.target.style.color = 'orange';
})
</script>
執行結果為：
成功顯示。
三、事件委託的作用
通過上面的操作，我們可以得到：在事件委託中，我們只操作一次 DOM ，大大的提高了程式的效能。
到此這篇關於事件委託原理的文章就介紹到這了,更多相關Script事件委託內容請搜尋我們www.cppcns.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！