淺談Jquery中的bind(),live(),delegate(),on()綁定事件方式

時間  2020-06-03
標籤 淺談 jquery bind live delegate 綁定 事件 方式 欄目 JQuery 简体版
原文   原文鏈接

bind():javascript

簡要描述css

　　bind()向匹配元素添加一個或多個事件處理器。html

使用方式java

　　$(selector).bind(event,data,function)jquery

　　event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；app

　　　　　　　　　　單事件處理：例如 $(selector).bind("click",data,function);ide

　　　　　　　　　　多事件處理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);函數

　　　　　　　　　　　　　　　　2.利用大括號靈活定義多事件，例如 $(selector).bind({event1:function, event2:function, ...})　spa

　　　　　　　　　　　　　　　　3.空格相隔方式：綁定較爲死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數狀況；code

　　　　　　　　　　　　　　　　　大括號替代方式：綁定較爲靈活，能夠給事件單獨綁定函數；　　　  

　　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() 向當前或將來的匹配元素添加一個或多個事件處理器；

使用方式

　　$(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：必需；當綁定事件發生時，須要執行的函數；

例子：

<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() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。

使用方式　

　　$(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：必需；當綁定事件發生時，須要執行的函數；

例子：

<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() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。

使用方式　

　　$(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：必需；當綁定事件發生時，須要執行的函數；

例子：

<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()差些

4.bind()支持Jquery全部版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

 

想了解具體狀況，請戳這：

　http://kb.cnblogs.com/page/94469/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程