Jquery中的bind(),live(),delegate(),on()綁定事件方式 前言
前言
因為項目中經常會有利用jquery操作dom元素的增刪操作，所以會涉及到dom元素的綁定事件方式，簡單的歸納一下bind,live,delegate,on的區別，以便以後查閱，也希望該文章日後能幫助到園友，文中如有不當之處，還望各位指正，話不多說，直接進入正題。
bind()
簡要描述
bind()向匹配元素添加一個或多個事件處理器。
使用方式
$(selector).bind(event,data,function)
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如 $(selector).bind("click",data,function);
多事件處理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件，例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
data
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>jquery中bind()綁定事件方式</title>
4 <style type="text/css">
5 .container
6 {
7 width: 300px;
8 height: 300px;
9 border: 1px #ccc solid;
10 background-color: Green;
11 }
12 .btn-test
13 {
14 border: 1px #ccc solid;
15 padding: 5px 15px;
16 cursor: pointer;
17 }
18 </style>
19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 $(function () {
22
23 /*********添加單個事件處理*********/
24
25 $(".btn-test").bind("click", function () {
26 //顯示隱藏div
27 $(".container").slideToggle();
28 });
29
30 /********添加多個事件處理********/
31
32 //空格相隔方式
33 $(".btn-test").bind("mouseout click", function () {
34 //顯示隱藏div
35 $(".container").slideToggle();
36 });
37
38 //大括號替代方式
39 $(".btn-test").bind({
40 "mouseout": function () {
41 alert("這是mouseout事件!");
42 },
43 "click": function () {
44 $(".container").slideToggle();
45 }
46 });
47
48 /********刪除事件處理********/
49 $(".btn-test").unbind("click");
50
51 });
52 </script>
53 </head>
54 <body>
55 <input type="button" value="按鈕" class="btn-test" />
56 <div class="container">
57 </div>
58 </body>
59 </html>
適用Jquery版本
適用所有版本，但是根據官網解釋，自從jquery1.7版本以後bind()函數推薦用on()來代替。
live()
簡要描述
live() 向當前或未來的匹配元素添加一個或多個事件處理器；
使用方式
$(selector).live(event,data,function)
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如 $(selector).live("click",data,function);
多事件處理：1.利用空格分隔多事件，例如 $(selector).live("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件，例如 $(selector).live({event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>jquery中live()綁定事件方式</title>
4 <style type="text/css">
5 .container
6 {
7 width: 300px;
8 height: 300px;
9 border: 1px #ccc solid;
10 background-color: Green;
11 }
12 .btn-test
13 {
14 border: 1px #ccc solid;
15 padding: 5px 15px;
16 cursor: pointer;
17 }
18 </style>
19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 $(function () {
22
23 /*********添加單個事件處理*********/
24
25 $(".btn-test").live("click", function () {
26 //顯示隱藏div
27 $(".container").slideToggle();
28 });
29
30
31 /********添加多個事件處理********/
32
33 //空格相隔方式
34 $(".btn-test").live("mouseout click", function () {
35 //顯示隱藏div
36 $(".container").slideToggle();
37 });
38
39 //大括號替代方式
40 $(".btn-test").live({
41 "mouseout": function () {
42 alert("這是mouseout事件!");
43 },
44 "click": function () {
45 $(".container").slideToggle();
46 }
47 });
48
49 /********刪除事件處理********/
50 $(".btn-test").die("click");
51
52 });
53 </script>
54 </head>
55 <body>
56 <input type="button" value="按鈕" class="btn-test" />
57 <div class="container">
58 </div>
59 </body>
60 </html>
適用Jquery版本
jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替。
delegate()
簡要描述
delegate() 為指定的元素（被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需項；需要添加事件處理程序的元素，一般為selector的子元素；
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如 $(selector).delegate(childselector,"click",data,function);
多事件處理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>jquery中delegate()綁定事件方式</title>
4 <style type="text/css">
5 .container
6 {
7 width: 300px;
8 height: 300px;
9 border: 1px #ccc solid;
10 background-color: Green;
11 }
12 .btn-test
13 {
14 border: 1px #ccc solid;
15 padding: 5px 15px;
16 cursor: pointer;
17 }
18 </style>
19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 $(function () {
22
23 /***********單元素添加單事件***********/
24
25 //按鈕綁定單擊事件 實現div的顯示隱藏
26 $(".header").delegate("#btn-test1", "click", function () {
27 $(".container").slideToggle();
28 });
29
30
31 /***********單元素添加多事件***********/
32
33 //空格相隔方式
34 $(".header").delegate("#btn-test1", "click mouseout", function () {
35 $(".container").slideToggle();
36 });
37
38 //大括號替代方式
39 $(".header").delegate("#btn-test1", {
40 "mouseout": function () {
41 alert("這是mouseout事件!");
42 },
43 "click": function () {
44 $(".container").slideToggle();
45 }
46 });
47
48
49 });
50 </script>
51 </head>
52 <body>
53 <div class="header">
54 <input type="button" value="按鈕1" class="btn-test" id="btn-test1" />
55 <input type="button" value="按鈕2" class="btn-test" id="btn-test2" />
56 </div>
57 <div class="container">
58 </div>
59 </body>
60 </html>
適用Jquery版本
jquery1.4.2及其以上版本；
on()
簡要描述
on() 為指定的元素,添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。使用 on() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。
使用方式
$(selector).on(event,childselector,data,function)
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如 $(selector).on("click",childselector,data,function);
多事件處理：1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括號靈活定義多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數；
childSelector: 可選；需要添加事件處理程序的元素，一般為selector的子元素；
data：可選；需要傳遞的參數；
function：必需；當綁定事件發生時，需要執行的函數；
舉例說明
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>jquery中on()綁定事件方式</title>
4 <style type="text/css">
5 .container
6 {
7 width: 300px;
8 height: 300px;
9 border: 1px #ccc solid;
10 background-color: Green;
11 }
12 .btn-test
13 {
14 border: 1px #ccc solid;
15 padding: 5px 15px;
16 cursor: pointer;
17 }
18 </style>
19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 $(function () {
22
23 /*********添加單個事件處理*********/
24
25 $(".header").on("click", ".btn-test", function () {
26 //顯示隱藏div
27 $(".container").slideToggle();
28 });
29
30 /********添加多個事件處理********/
31
32 //空格相隔方式
33 $(".header").on("mouseout click", ".btn-test", function () {
34 //顯示隱藏div
35 $(".container").slideToggle();
36 });
37
38 //大括號替代方式
39 $(".header").on({
40 "mouseout": function () {
41 alert("這是mouseout事件!");
42 },
43 "click": function () {
44 $(".container").slideToggle();
45 }
46 }, ".btn-test");
47
48 //刪除事件
49 $(".header").off("click", ".btn-test");
50
51 });
52 </script>
53 </head>
54 <body>
55 <div class="header">
56 <input type="button" value="按鈕" class="btn-test" />
57 </div>
58 <div class="container">
59 </div>
60 </body>
61 </html>
適用Jquery版本
jquery1.7及其以上版本；jquery1.7版本出現之後用於替代bind()，live()綁定事件方式；
四種方式的異同和優缺點
相同點：
1.都支持單元素多事件的綁定；空格相隔方式或者大括號替代方式;
2.均是通過事件冒泡方式，將事件傳遞到document進行事件的響應；
比較和聯系:
1.bind()函數只能針對已經存在的元素進行事件的設置；但是live(),on(),delegate()均支持未來新添加元素的事件設置；演示代碼如下:
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>jquery中四種方式給未來元素設置事件</title>
4 <style type="text/css">
5 .container
6 {
7 width: 300px;
8 height: 300px;
9 border: 1px #ccc solid;
10 background-color: Green;
11 }
12 .btn-test
13 {
14 border: 1px #ccc solid;
15 padding: 5px 15px;
16 cursor: pointer;
17 }
18 </style>
19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 $(function () {
22
23 //利用bind()方法，給P標簽設置click方法 ======失敗 沒有任何反應=======
24 $(".container p").bind("click", function () {
25 alert("bind()添加單擊事件成功!");
26 });
27
28 //利用live()方法.給P標簽設置click方法 =======成功調用方法============
29 $(".container p").live("click", function () {
30 alert("live()添加單擊事件成功!");
31 });
32
33 //利用delegate()方法.給P標簽設置click方法 =======成功調用方法============
34 $(".container").delegate("p", "click", function () {
35 //顯示隱藏div
36 alert("delegate()添加單擊事件成功!");
37 });
38
39 //利用on()方法.給P標簽設置click方法 =======成功調用方法============
40 $(".container").on("click", "p", function () {
41 //顯示隱藏div
42 alert("on()添加單擊事件成功!");
43 });
44
45 //按鈕添加P標簽
46 $(".btn-test").click(function () {
47 $(".container").append("<p>這是新增的段落!</p>");
48 });
49 });
50 </script>
51 </head>
52 <body>
53 <input type="button" class="btn-test" value="添加元素" />
54 <div class="container">
55 </div>
56 </body>
57 </html>
2.bind()函數在jquery1.7版本以前比較受推崇，1.7版本出來之後，官方已經不推薦用bind()，替代函數為on(),這也是1.7版本新添加的函數，同樣，可以
用來代替live()函數，live()函數在1.9版本已經刪除；
3.live()函數和delegate()函數兩者類似，但是live()函數在執行速度，靈活性和CSS選擇器支持方面較delegate()差些，想了解具體情況，請戳這：
http://kb.cnblogs.com/page/94469/
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
Jquery中的bind(),live(),delegate(),on()綁定事件方式 前言