JavaScript(jQuery)中的事件委託

時間 2019-11-24

標籤 javascript jquery 事件委託欄目 JavaScript 简体版

原文原文鏈接

一：什麼是事件委託？css

事件委託是利用事件冒泡，只指定一個事件處理程序來管理某一類型的全部事件。node

二：爲何要用事件委託？函數

1.在JavaScript中添加到頁面上的事件處理程序的個數直接關係到頁面的總體運行性能。爲何呢？由於，每一個事件處理函數都是對象，對象會佔用內存，內存中的對象越多，性能就越差。此外，必須事先指定全部的事件處理程序而致使的DOM訪問次數，會延遲整個頁面的交互就緒時間。性能

2.對有不少個數據的表格以及很長的列表逐個添加事件，簡直就是噩夢。因此事件委託，能極大地提升頁面的運行性能，減小開發人員的工做量。spa

三：JavaScript中的例子code

咱們如下面的HTML代碼爲例，用事件委託的方式實現當鼠標單擊某個li元素的時候，li元素的背景變成紅色。對象

1  <ul id = "lists">
2          <li>列表1</li>
3          <li>列表2</li>
4          <li>列表3</li>
5          <li>列表4</li>
6          <li>列表5</li>
7          <li>列表6</li>
8  </ul>

下面是JavaScript代碼：blog

 1         var lists = document.getElementById("lists");
 2 
 3         lists.addEventListener("click",function(event){
 4 
 5             var target = event.target;
 6             //防止父元素ul也觸發事件
 7             if(target.nodeName == "LI"){
 8                target.style.backgroundColor = "red";
 9             }
10         })

單擊列表4，實現效果：事件

三：jQuery中的例子ip

jQuery中的事件委託方式比較豐富，就以一樣的例子來講：

一、用on方法,代碼以下：

1  $(function(){
2             $("#lists").on("click","li",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })

2.用delegate（）方法，代碼以下：

1         $(function(){
2             $("#lists").delegate("li","click",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })

on()方法和delegate（）方法對於事件委託的寫法很像。而且執行事件委託的時候只有子元素（本文中的li）會觸發事件，而代爲執行的父元素（本文中爲ul）不會觸發事件，因此咱們不須要盤判斷觸發事件的元素節點名，這一點明顯優於原生的JavaScript。

3.用bind()方法，代碼以下：

1        $(function(){
2             $("#lists").bind("click","li",function(event){
3                 var target = $(event.target);
4                 if(target.prop("nodeName")=="LI"){
5                 target.css("background-color","red");}
6             })
7         })