query中的bind(),live(),delegate(),on()有什麼區別？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【query中的bind(),live(),delegate(),on()有什麼區別？ 】
標題：
【修真院web小課堂】
query中的bind(),live(),delegate(),on()有什麼區別？
開場語：
大家好，我是IT修真院北京分院第36期的學員張新，一枚正直純潔善良的web程式設計師，今天給大家分享一下，修真院官網js（職業）任務3，深度思考中的知識點——
query中的bind(),live(),delegate(),on()有什麼區別？
（1）背景介紹：
在學習和實踐jquery框架的過程中，由於開始，只是使用的《鋒利的Jquery》中繫結事件的方法，只認識到了bind()的方法。而該書是基於jquery1.7.1編寫的，目前最新的版本已經到了3.2。對於繫結事件的方法做了調整。後來發現還有live()、delegate()、on()的方法，它們之間有什麼樣的區別呢？我們來學習討論一下。
（2）知識剖析：
on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。它是在1.7版本中被提出來的，提供繫結事件處理程式所需的所有功能。用於替換 bind()、delegate()和 live()。
（3）常見問題：
bind(),live(),delegate(),on()的特點？
（4）解決方案：
直接繫結在已經存在的元素上，但是對在它執行完後動態新增的那些元素上不起作用。因為直接繫結在具體的元素上，響應事件及時，它是出現最早的一種繫結事件的方法。這種方法很浪費資源，引起效能問題，因為它要匹配選擇器中的每一項並且挨個設定相同的事件處理程式。如果在頁面載入前要處理新增事件的話，會影響載入效率的。在jquery1.7版本以前比較受推崇。在jquery1.7版本之後，官方推薦使用on()方法代替。在jquery3.0版本之後，已經刪除該方法。
與bind()的實現原理卻不同。live()方法附加事件處理程式在document上通過冒泡來關聯匹配到相應的元素和事件資訊。對新新增的元素依然有效。不需要在每個元素上去繫結事件，而只在document上繫結一次就可以了。可以在document ready之前就可以繫結那些需要的事件。但是jquery1.9版本之後，已經被棄用了。
更精確的小範圍使用事件代理，效能優於live()。它可以自由選擇附加的選擇器和事件資訊的位置，把事件繫結到具體元素的上一級較穩定（不會動態地新增或者刪除、變化）的元素上，縮短了事件冒泡的路徑。同樣對新新增的元素依然有效。在jquery3.0版本之後，已經刪除該方法。
是以上三種方法的統一。可以使用一個方法，設定不同引數值來實現上述三種方法的功能。簡化了jQuery程式碼庫，並刪除一個界別的重定向。
（5）編碼實戰：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被點選了。");
});
});
</script>
</head>
<body>
<p>點選這個段落。</p>
</body>
（6）拓展思考：
如何移除事件？
使用off方法移除事件
（7）參考文獻：
參考一：jQuery四種事件繫結方式.bind(),.live(),.delegate(),on()的區別
參考二：jQuery中.bind() .live() .delegate() .on()區別
參考二：jQuery中bind(),live(),delegate(),on()繫結事件方法例項詳解
（8）更多討論：
Q1：提問人：1.這四種方法的區別
A1：張新（可以是分享人，也可以是其他學員）：
.bind()是直接繫結在元素上
.live()則是通過冒泡的方式來繫結到元素上的。更適合列表型別的，繫結到document DOM節點上。和.bind()的優勢是支援動態資料。
.delegate()則是更精確的小範圍使用事件代理，效能優於.live()
.on()則是最新的1.9版本整合了之前的三種方式的新事件繫結機制
Q2：提問人：2，如今live（）方法是否還適合使用?
A2：張新（可以是分享人，也可以是其他學員）：
建議停止使用.live()方法，因為它已經被棄用了，由於他有很多的問題
Q3：提問人：3，為什麼更推薦使用on()方法
A3：張新（可以是分享人，也可以是其他學員）：
新的.on()方法主要是可以實現.bind() .live() 甚至 .delegate()的功能
（9）鳴謝：
感謝劉仁瑞師兄，此教程是在他們之前技術分享的基礎上完善而成。
（10）結束語：
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地