淺談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                 //顯示隱藏p

27                 $(".container").slideToggle();

28             });

29 

30             /********添加多個事件處理********/

31 

32             //空格相隔方式

33             $(".btn-test").bind("mouseout click", function () {

34                 //顯示隱藏p

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     <p class="container">

57     </p>

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                 //顯示隱藏p

27                 $(".container").slideToggle();

28             });

29 

30             

31             /********添加多個事件處理********/

32 

33             //空格相隔方式

34             $(".btn-test").live("mouseout click", function () {

35                 //顯示隱藏p

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     <p class="container">

58     </p>

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             //按鈕綁定單擊事件 實現p的顯示隱藏

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     <p 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     </p>

57     <p class="container">

58     </p>

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                 //顯示隱藏p

27                 $(".container").slideToggle();

28             });

29 

30             /********添加多個事件處理********/

31 

32             //空格相隔方式

33             $(".header").on("mouseout click", ".btn-test", function () {

34                 //顯示隱藏p

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     <p class="header">

56         <input type="button" value="按鈕" class="btn-test" />

57     </p>

58     <p class="container">

59     </p>

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                 //顯示隱藏p

36                 alert("delegate()添加單擊事件成功!");

37             });

38 

39             //利用on()方法.給P標簽設置click方法  =======成功調用方法============

40             $(".container").on("click", "p", function () {

41                 //顯示隱藏p

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     <p class="container">

55     </p>

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+; 

發佈留言