jQuery事件绑定与委托-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36311372/article/details/79090829

一。绑定事件、取消事件

为元素绑定事件的方式有好几种，取消其绑定的事件的方式也有几种。

在下面这个例子中列举出来：

 <!DOCTYPE html>

    <html><head>

            <meta charset="UTF-8">

            <title>event</title>

            <script type="text/javascript" src="../js/jquery-3.1.0.js"></script>

            <script type="text/javascript">

                    $(function() {


                            // 通过on函数添加

                            $("#on").on("click", function() {

                                    alert("ON绑定 --> 点击事件");

                            })


                            // 直接通过事件名指定

                            $("#directly").click(function() {

                                    alert("直接绑定 --> 点击事件");

                            })


                            // 通过bind绑定

                            $("#bind").bind("click", function() {

                                    alert("bind指定 --> 点击事件");

                            })


                            // 此按钮之外所有按钮点击事件失效

                            $("#btB").click(function() {

                                    $("input:not(:last)").each(function() {

                                            $(this).unbind("click");

                                            //也可以用这个：$(this).off("click");

                                            /*虽然on 和 off是相对应，但也可以用于

                                            取消其他方式绑定的事件上*/

                                    })

                            })


                            // 双击则追加回去

                            $("input:not(:last)").dblclick(function() {

                                    $(this).on("click", function() {

                                            alert($(this).val() + " --> 点击事件");

                                    });

                            })

                    })

            </script>

    </head>

    <body>

            <input type="button" id="on" value="ON绑定" />

            <input type="button" id="directly" value="直接绑定" />

            <input type="button" id="bind" value="bind绑定" />

            <input type="button" id="btB" value="按钮B" /></body>

    </html>

使绑定的事件只生效一次：

<!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../js/jquery-3.1.0.js"></script>

    <script type="text/javascript">

            $(function() {

                    

                    // 第一种方式：点击事件只生效一次

                    $("#one").one("click", function() {

                            alert("按钮的点击事件只生效一次");

                    })


                    // 第二种方式: 直接使按钮灰化

                    $("#one").click(function(){

                            alert("按钮将会灰化");

                            $(this).attr("disabled","disabled");

                    })

                    

                    // 恢复

                    $("#reset").click(function(){

                            $("#one").removeAttr("disabled");

                    })

            })

            </script>

    </head>

    <body>

            <input type="button" id="one" value="ONE绑定" />

            <input type="button" id="reset" value="恢复" />

    </body>

    </html>

其他事件可以通过这个例子举一反三。

二。事件委托

  <!DOCTYPE html>

    <html>

    <head>

            <meta charset="UTF-8">

            <title>事件委托</title>

            <script type="text/javascript" src="../js/jquery-3.1.0.js"></script>

            <script type="text/javascript">

                    $(function() {

                            // 为按钮绑定点击事件

                            $("input[name='bt']").click(function(){

                                    alert("点击事件！！");

                            })

                            

                            // 追加按钮

                            $("#btn").click(function () {

                                    $("div").append("<input type='button' name='bt' value='按钮' style='margin-left: 5px;'/>");

                            })

                    })

            </script>

    </head>

    <body>

            <div>

                    <input type="button" name="bt" value="按钮" />

                    <input type="button" name="bt" value="按钮" />

            </div>

            <hr />

            <input type="button" id="btn"  value="新增按钮" />

    </body>

    </html>

在上面这个例子中，div里的中默认的两个按钮都会被绑定一个点击事件。

但现在点击一下新增按钮，往div中追加一个按钮：

按钮的属性和之前的两个一模一样，不同之处就在于这个按钮无法触发点击事件，即便它符合选择器的条件。因为它是在click方法绑定完所有按钮之后才添加进来的，这种是非委派绑定：

相同的选择器绑定的事件后续添加进来相同元素不会绑定该事件。

委派模式：

$(document).on("click","input[name='bt']" , function () {
         alert("点击事件！！");}
)

先将document对象转换成JQuery对象，使用on添加绑定，参数顺序：

事件类型 -- 选择器 -- [传递的数据] -- 触发的方法

这样，什么时候添加进来的按钮都会被绑定这个点击事件，这就叫事件委派。

JQuery事件