JavaScript事件委托原理
一、什麼是事件委托
事件委托也稱為事件代理。就是利用事件冒泡,把子元素的事件都綁定到父元素上。如果子元素阻止瞭事件冒泡,那麼委托就無法實現。
舉個簡單的例子:
例如快遞員有100個快遞要分別送給100個學生, 如果一個個的送花費時間較長。同時每個學生領取的時候,也需要排隊領取,也花費時間較長,應該怎樣操作呢?這時快遞員可以把100個快遞委托給班主任,班主任把這些快遞放到辦公室,同學們下課自行領取即可。這樣的話,快遞員省事,同學們領取也更方便。這個過程就是一個委托事件。
二、事件委托的原理
不是每個子節點單獨設置事件監聽器,而是事件監聽器設置在其父節點上,然後利用冒泡原理影響設置每個子節點。
我們再來看看在具體的程序中是如何實現的吧!
比如,我們現在有一個無序列表,在無序列表裡面有五個li,我們想要給每個li添加一個點擊事件,這個時候,我們常規操作是通過循環給每個li添加點擊事件。
代碼如下所示:
<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(){ this.style.color = 'green'; } } </script> </body>
運行結果為:
這種方法的確可以實現我們的點擊操作,但是這個過程中,由於每次都要給li添加點擊事件,造成訪問DOM的次數過多,會延長整個頁面的交互就緒時間。
所以,這裡,我們就可以用到事件委托,即給ul註冊點擊事件,然後利用事件對象的 target 來找到當前點擊的 li,因為點擊li,事件會冒泡到ul上,ul有註冊事件,就會觸發事件監聽器。
實現代碼為:
<script> var ul = document.querySelector('ul'); ul.addEventListener('click',function(e){ e.target.style.color = 'orange'; }) </script>
運行結果為:
成功顯示。
三、事件委托的作用
通過上面的操作,我們可以得到:在事件委托中,我們隻操作一次 DOM ,大大的提高瞭程序的性能。
到此這篇關於JavaScript事件委托原理的文章就介紹到這瞭,更多相關JavaScript事件委托內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript之BOM構成和常用事件詳解
- javascript實現簡單留言板案例
- JavaScript事件的委托(代理)的用法示例詳解
- 淺析js中事件冒泡與事件捕獲
- JavaScript的DOM事件詳解