本篇文章借鑑自：部落格園文章，只為自己鞏固下事件委託方面的知識

概述:

什麼叫事件委託？他還有一個名字叫做事件代理，（時間代理 === 事件委託，現在才知道這兩個是一個意思）

高程3上講：事件委託即是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。

借鑑其他大牛的一個例子，也為自己更好的理解一下：收快遞例子 有三個同事預計會在週一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委託給前臺MM代為簽收。現實當中，我們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就為了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，然後按照收件人的要求籤收，甚至代為付款。這種方案還有一個優勢，那就是即使公司裡來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞後核實並代為簽收。
兩層意思： 1.現在委託前臺的同事是可以簽收的，即程式中的現有的dom節點是有事件的； 2.新員工也是可以被前臺mm代為簽收的，即程式中新新增的dom節點也是有事件的； 為什麼要用事件委託？？？事件委託有什麼好處？？？ 一般來說，dom是需要有事件處理程式的，我們會直接給他事件處理程式就好了，那麼如果是很多dom元素需要新增事件處理呢？？？ 比如 100個li，每個li 都有相同的click點選事件，可能我們會有for迴圈的方法，來遍歷所有li，然後為每個li新增繫結事件。 這麼做毫無疑問的是對效能有很大的影響； 在js中，新增到頁面上的事件處理程式的多少將直接關係到頁面執行的整體效能，因為需要不斷的與dom節點進行互動，訪問dom次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的互動就緒時間。 這就是效能優化，減少dom操作的原因； 如果採用事件委託，就會將所有的操作放到js程式裡面，與dom的操作就只互動一次，這樣減少了dom互動次數，效能就會提升； 事件委託原理： 事件委託就是利用事件冒泡原理實現的！ 事件冒泡：就是事件從最深節點開始，然後逐步向上傳播事件； 例：頁面上有一個節點樹，div > ul  > li  >  a 比如給最裡面的a 加一個click 事件，那麼事件就會一層一層的往外執行，執行順序 a > li > ul > div,  有這樣一個機制，當我們給最外層的div 新增點選事件，那麼裡面的ul ， li  ， a  做點選事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委託，委託他們父集代為執行事件； 業務需求：實現功能，點選td ,單元格變色； html結構

1. <!-- 事件繫結 -->
2.     <tableid="myTable"border="1">
3.         <tr>
4.             <td>1</td>
5.             <td>2</td>
6.             <td>3</td>
7.         </tr>
8.     </table>

[javascript] view plain copy

1. window.onload = function(){  
2.     var oTa = document.getElementById("myTable");  
3.     var aTd = oTa.getElementsByTagName('td');  
4.     for(var i=0;i<aTd.length;i++){  
5.         aTd[i].onclick = function(){  
6.             aTd[i].style.background = 'red';  
7.         }  
8.     }  
9. }  

上面的辦法是最簡單的辦法，也是最笨的辦法，我們看看執行了多少次dom操作，首先找到table 然後遍歷td ，當點選td的時候，又要找一次目標的li的位置，才能執行最後的操作，每次點選都要找一次td 那我們用事件委託的方式怎麼來寫呢，？？ [javascript] view plain copy

1. window.onload = function(){  
2.     var oTa= document.getElementById("myTable");  
3.     oTa.onclick = function(){         //點選 table、td均可以alert(123)
4.        alert(123);    
5.     }}  

[javascript] view plain copy

1. <pre></pre>  
2. <pre></pre>  

這裡用父集做事件處理，當td被點選時，由於冒泡原理事件就會冒泡到table上，因此table上有點選事件，所以事件就會被觸發;
當然單當點選table本身的時候也是會觸發的； 如果我們只想讓td觸發而不想讓table觸發，怎麼辦呢？？？ Event物件提供了一個屬性叫做target，可以返回事件的目標節點，我們稱之為事件源，也就是說，target就可以表示當前事件操作的dom，但可能不是真正操作的dom， 存在相容性問題：標準瀏覽器：event.target，IE瀏覽器：event.srcElement， 此時只是獲取了當前節點的位置，但並不知道節點名稱，這裡我們用nodeName來獲取具體是什麼標籤名，這個返回值是一個大寫的，判斷時需要轉換為小寫； [javascript] view plain copy

1. window.onload = function(){  
2. 　　var oTa = document.getElementById("myTable");  
3. 　　oTa.onclick = function(e){  
4. 　　　　var e = e || window.event;                    //處理相容性
5. 　　　　var target = e.target || e.srcElement;　　　  
6. 　　　　target.nodeName.toLowerCase() == 'td' ? alert('我點中了table') ：(target.style.background = 'red');  //三元運算子進行判斷
7. 　　}  
8. }  

這樣改一下，就只有td會觸發事件啦，且每次只執行一次dom操作，如果td很多的話，將大大減小dom的操作； 上面的例子是說td點選都是產生同樣的效果，要是每個td被點選的效果都不一樣，那麼事件委託還有用嗎，？？？ [javascript] view plain copy

1. <!-- 事件繫結 -->  
2.     <table id="myTable" border="1">  
3.         <tr>  
4.             <td id="add">增加</td>  
5.             <td id="delete">刪除</td>  
6.             <td id="modfiy">修改</td>  
7.             <td id="select">查詢</td>  
8.         </tr>  
9.     </table>  

非事件委託寫法 [javascript] view plain copy

1. window.onload = function(){  
2.             var Add = document.getElementById("add");  
3.             var Delete = document.getElementById("delete");  
4.             var Move = document.getElementById("move");  
5.             var Select = document.getElementById("select");  
6.             Add.onclick = function(){  
7.                 alert('新增');  
8.             };  
9.             Remove.onclick = function(){  
10.                 alert('刪除');  
11.             };  
12.             Move.onclick = function(){  
13.                 alert('移動');  
14.             };  
15.             Select.onclick = function(){  
16.                 alert('選擇');  
17.             }  
18.         }  

4個按鈕，點選每一個做不同的動作，，，那麼至少需要4次dom操作； 如果用事件委託，能進行優化嗎？ 事件委託寫法
[javascript] view plain copy

1. window.onload = function(){  
2.             var myTable = document.getElementById("myTable");  
3.             myTable.onclick = function (ev) {     
4.                 var ev = ev || window.event;  
5. 相關推薦

   javascript事件委託理解，jQuery on 方法一步到位實現事件委託

   分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

   javascript事件委託理解，jQuery .on()方法一步到位實現事件委託

   本篇文章借鑑自：部落格園文章，只為自己鞏固下事件委託方面的知識 概述: 什麼叫事件委託？他還有一個名字叫做事件代理，（時間代理 === 事件委託，現在才知道這兩個是一個意思） 高程3上講：事件委託即是利用事件冒泡，只指定一個事件處理程式，就可以管理某

   CAD圖紙轉換成高質量的PDF文件，兩種方法一步搞定哦

   設計 彈出 雙擊 下載 顯示 快捷 pdf 搜索 鼠標 其實提到CAD，可能大家都大致的了解，CAD現在已經是建築行業運用的非常廣泛的一個設計軟件了，其實CAD就是一種計算機輔助軟件，可以高效的幫助我們進行圖紙的繪制。我們一般在設計完圖紙，可能定會轉換格式，以至於可以方便的

   jQuery的on()方法的兩種用法（委託給父元素進行事件監聽代理）

   /* 6. 增加刪除元素*jQuery: * */     var li=$('<li class="item">content</li>');//建立子節點     $('ul').append(li);//在父節點後面新增子節點     $(li

   Jquery on方法綁定事件後執行多次

   cnblogs clas cli func jquery on col log () fun $("#btnOktcHc").on("click", function () {}); $("#btnOktcHc").off("click"); on 對同一個元素

   jQuery on() 方法 為選定已存在元素和未來元素繫結標準事件和自定義事件

   很有必要說說jQuery的on方法，這個方法存在大乾坤大奧祕，主要注意兩點： 1、為已存在元素和未來元素（動態新增元素）繫結處理函式。 2、自定義一個非標準的事件並繫結處理函式。 定義和用法 on() 方法在被選元素及子元素上新增一個或多個事件處理程式。 自 jQuery 版本 1.7 起，on()

   jQuery on() 方法—向未建立的元素新增事件處理程式

   向未來的元素新增事件處理程式（演示 on() 方法也適用於尚未建立的元素） <!DOCTYPE html> <html> <head> <scri

   Jquery on方法繫結事件後執行多次

   這兩天工作中遇到使用js動態載入內容，同時需要對加入的內容繫結點選事件的，當時想想了想可以使用內聯的onclick 來實現，後來沒有這樣做，使用的是 on(‘click’,function(){}) ,然而使用on方法的時候就發現，on 對同一個元素多次繫結同一

   Jquery中的on()使用理解,無法使用on方法

   jquery中利用了on方法給未來元素繫結方法。 利用on方法可以方便的對將生成的元素標籤進行方法繫結。 本例中使用的是jquery.min.js 是2.1版本,低版本的jquery使用的是live方法。 首先需要知道on方法的使用方法： $(非未來元素

   jQuery on()方法

   tip rom function inpu child ack += toggle mar 原文鏈接：http://caibaojian.com/jquery-on.html jQuery on()方法是jQuery官方推薦的一個函數，替換live、bind、delega

   Java程序猿的JavaScript學習筆記（9—— jQuery工具方法）

   article 順序 還要 並且 defined this ont property plain 計劃按例如以下順序完畢這篇筆記： Java程序猿的JavaScript學習筆記（1——理念） Java程序猿的JavaScript學習筆記（2——屬性

   jquery on方法 繫結動態元素 出現的問題

                   之前使用 on 的時候一直是$("").on('click','function(){}')之後發現有些時候一直無法繫結（比如元素動態生成時），檢視文件後發現正確用法應該是$(document).on("change","#pageSize_out",function(){  

   jQuery on() 方法詳解（二）

   The event handler and its environment（事件處理程式和它的環境） handler引數必須是一個函式（或false值，見下文）， 除非你傳遞一個物件給events引數。 您可以提供一個匿名處理函式給.on()呼叫，就像上

   jquery on()方法 off()方法

   自從jquery1.7以來，on事件新增到這個版本，使得事件的繫結變的十分簡單，用過jquery的人都說好，相信對off，on方法愛不釋手。下面是我總結出來的on,off的使用語法，希望對小夥伴有幫助。 on() 使用場景最多 最簡單的寫法 $("ul

   使用Javascript動態建立表格，不同的方法，巨大的執行時間差異！

   本來是想測試一下使用Javascript生成一個比較大的表格，大概需要多長時間，一直認為這會是一個比較固定的時間。期間用了幾種不同的方法，發現效率相差太大了。下面是測試的具體說明： 目標：生成一個2000*5的表格，每個單元格的內容是行號+逗號+列號 方法一：使用cre

   jQuery on()方法給動態生成的元素繫結方法

   bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); 　　$("p").on("click",function(){ 　　　　alert("The paragraph was clic

   jQuery on()方法使用

   創建 函數 brush event tro 綁定 基本語法 log tex jQuery on()方法 基本語法： 語法結構一： $(selector).on(event,function) 語法結構二： $

   偶然在網上看到的題目，jQuery功底如何一測便知曉！！！！！！

   下劃線 最終 log 設置 html 技術分享 顏色 移動 創建表 筆者最終實現的效果如下：　　　　參考答案下載地址 通過手寫html代碼實現如圖效果： ============以下題目全部使用jQuery來做=========== 當點擊“加載數據”按鈕時根據提供

   JavaScript電子書合集，你不領一份兒嗎

   scrip mage 合集 理解 png 都是 .com body 高清 學習編程不能只看視頻。 看技術博客，看文檔，看相關編程書籍，都是必不可少的學習環節，也是加深對語言理解的一種有效方法。 這裏，略小坑給大家整理了36本JavaScript經典書籍的電子版，除了幾本是掃

   點選事件被循化累加呼叫，沒點選一次 點選事件執行次數比上一次+1，解決

   利用jquery的unbind方法， $('#id').unbind('click').bind('click',function(){ //事件處理 }); 定義和用法 unbind() 方法移除被選元素的事件處理程式。 該方法能夠移除所有的或被選的事件處理程式，或者當事件發生