本文實例分析了jQuery中bind(),live(),delegate(),on()綁定事件方法。分享給大家供大家參考，具體如下：
前言
因為項目中經常會有利用jquery操作dom元素的增刪操作，所以會涉及到dom元素的綁定事件方式，簡單的歸納一下bind,live,delegate,on的區別，以便以后查閱，也希望該文章日后能幫助到各位朋友，文中如有不當之處，還望各位指正，話不多說，直接進入正題。
一、bind()
簡要描述
bind()向匹配元素添加一個或多個事件處理器。
使用方式
單事件處理：例如
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery中bind()綁定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加單個事件處理*********/ $(".btn-test").bind("click", function () { //顯示隱藏div $(".container").slideToggle(); }); /********添加多個事件處理********/ //空格相隔方式 $(".btn-test").bind("mouseout click", function () { //顯示隱藏div $(".container").slideToggle(); }); //大括號替代方式 $(".btn-test").bind({ "mouseout": function () { alert("這是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }); /********刪除事件處理********/ $(".btn-test").unbind("click"); }); </script></head><body> <input type="button" value="按鈕" class="btn-test" /> <div class="container"> </div></body></html>適用Jquery版本
適用所有版本，但是根據官網解釋，自從jquery1.7版本以后bind()函數推薦用on()來代替。
二、live()
簡要描述
live() 向當前或未來的匹配元素添加一個或多個事件處理器；
使用方式
單事件處理：例如
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery中live()綁定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加單個事件處理*********/ $(".btn-test").live("click", function () { //顯示隱藏div $(".container").slideToggle(); }); /********添加多個事件處理********/ //空格相隔方式 $(".btn-test").live("mouseout click", function () { //顯示隱藏div $(".container").slideToggle(); }); //大括號替代方式 $(".btn-test").live({ "mouseout": function () { alert("這是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }); /********刪除事件處理********/ $(".btn-test").die("click"); }); </script></head><body> <input type="button" value="按鈕" class="btn-test" /> <div class="container"> </div></body></html>適用Jquery版本
jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替。
三、delegate()
簡要描述
delegate() 為指定的元素（被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。
使用方式
單事件處理：例如
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery中delegate()綁定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /***********單元素添加單事件***********/ //按鈕綁定單擊事件 實現div的顯示隱藏 $(".header").delegate("#btn-test1", "click", function () { $(".container").slideToggle(); }); /***********單元素添加多事件***********/ //空格相隔方式 $(".header").delegate("#btn-test1", "click mouseout", function () { $(".container").slideToggle(); }); //大括號替代方式 $(".header").delegate("#btn-test1", { "mouseout": function () { alert("這是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }); }); </script></head><body> <div class="header"> <input type="button" value="按鈕1" class="btn-test" id="btn-test1" /> <input type="button" value="按鈕2" class="btn-test" id="btn-test2" /> </div> <div class="container"> </div></body></html>適用Jquery版本
jquery1.4.2及其以上版本；
四、on()
簡要描述
on() 為指定的元素,添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。使用 on() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。
使用方式
單事件處理：例如
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
childSelector: 可選；需要添加事件處理程序的元素，一般為selector的子元素；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery中on()綁定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加單個事件處理*********/ $(".header").on("click", ".btn-test", function () { //顯示隱藏div $(".container").slideToggle(); }); /********添加多個事件處理********/ //空格相隔方式 $(".header").on("mouseout click", ".btn-test", function () { //顯示隱藏div $(".container").slideToggle(); }); //大括號替代方式 $(".header").on({ "mouseout": function () { alert("這是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }, ".btn-test"); //刪除事件 $(".header").off("click", ".btn-test"); }); </script></head><body> <div class="header"> <input type="button" value="按鈕" class="btn-test" /> </div> <div class="container"> </div></body></html>適用Jquery版本
jquery1.7及其以上版本；jquery1.7版本出現之后用于替代bind()，live()綁定事件方式；
五、四種方式的異同和優缺點
相同點：
1.都支持單元素多事件的綁定；空格相隔方式或者大括號替代方式;
2.均是通過事件冒泡方式，將事件傳遞到document進行事件的響應；
比較和聯系:
1.bind()函數只能針對已經存在的元素進行事件的設置；但是live(),on(),delegate()均支持未來新添加元素的事件設置；演示代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery中四種方式給未來元素設置事件</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //利用bind()方法，給P標簽設置click方法 ======失敗 沒有任何反應======= $(".container p").bind("click", function () { alert("bind()添加單擊事件成功!"); }); //利用live()方法.給P標簽設置click方法 =======成功調用方法============ $(".container p").live("click", function () { alert("live()添加單擊事件成功!"); }); //利用delegate()方法.給P標簽設置click方法 =======成功調用方法============ $(".container").delegate("p", "click", function () { //顯示隱藏div alert("delegate()添加單擊事件成功!"); }); //利用on()方法.給P標簽設置click方法 =======成功調用方法============ $(".container").on("click", "p", function () { //顯示隱藏div alert("on()添加單擊事件成功!"); }); //按鈕添加P標簽 $(".btn-test").click(function () { $(".container").append("<p>這是新增的段落!</p>"); }); }); </script></head><body> <input type="button" class="btn-test" value="添加元素" /> <div class="container"> </div></body></html>2.bind()函數在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經不推薦用bind()，替代函數為on(),這也是1.7版本新添加的函數，同樣，可以用來代替live()函數，live()函數在1.9版本已經刪除；
3.live()函數和delegate()函數兩者類似，但是live()函數在執行速度，靈活性和CSS選擇器支持方面較delegate()差些，想了解具體情況，請參考這篇《jQuery中的.bind()、.live()和.delegate()之間區別分析》
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
六、總結
如果項目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來代替，以上僅為個人看法，如有不同想法，歡迎拍磚交流。
更多關于jQuery事件相關內容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
