jQuery——为元素解绑事件不同方法

例：bind解绑事件
用什么方式绑定事件，最好用对应的方式解绑事件
bind括号中写什么事件的名字就会把这个事件解绑，会把这个元素的这个点击的多个事件都会解绑

    <style>
        div{
            width:100px;
            height:30px;
            background-color: red;
            cursor:pointer;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            //第一个按钮为div绑定事件
            $("#btn").click(function(){
                $("#dv").bind("click",function(){
                    console.log("div被点了");
                }).bind("click",function(){
                    console.log("div被点击第二次");
                });
                //鼠标进入
                $("#dv").bind("mouseenter",function(){
                    $(this).css("backgroundColor","blue");
                });
                //鼠标离开
                $("#dv").bind("mouseleave",function(){
                    $(this).css("backgroundColor","yellow");
                });
            });
            //第二个按钮为div解绑事件
            $("#btn2").click(function(){
                //解绑的是点击事件，所有点击事件全部移除
                $("#dv").unbind("click");
                //括号中没有任何参数，此时该元素的所有事件全部解绑
                //$("#dv").unbind();
                //同时解绑多个事件
                //$("#dv").unbind("mouseenter mouseleave");
            });
        });
    </script>
......
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv"></div>

例：delegate解绑事件

    <script>
        //delegate绑定事件对应的解绑方式
        //点击第一个按钮，div有自己的点击事件，有鼠标进入和鼠标离开事件
        //同时为p绑定点击事件
        $(function(){
            $("#btn").click(function () {
                $("#dv").click(function () {
                    console.log("div被点了");
                }).mouseenter(function(){
                    console.log("鼠标进入");
                }).mouseleave(function(){
                    console.log("鼠标离开");
                });
                //在div中创建一个p，同时绑定点击事件
                $("<p>这是一个p</p>").appendTo($("#dv"));
                //为p绑定事件
                $("#dv").delegate("p","click",function(){
                    console.log("被点了");
                });
            });
            //第二个按钮解绑事件
            $("#btn2").click(function(){
                //p的点击事件没有了，移除了p的所有事件
                //$("#dv").undelegate();
                //移除的是p的点击事件
                $("#dv").undelegate("p","click");
                //可以移除多个事件，但是每个事件之间用空格隔开
                $("#dv").undelegate("p","click mouseenter");
            });
        });
    </script>

例：off解绑的不同代码方法

                $("#btn2").click(function(){
                    //父级元素和子级元素所有事件全部解绑
                    //$("#dv").off();
                    //把父级元素和子级元素的点击事件解绑
                    //$("#dv").off("click");
                    //父级元素和子级元素的多个事件，中间用空格
                    //$("#dv").off("click mouseenter");
                    //解绑p标签的点击事件
                    //$("#dv").off("click","p");
                    //p的两个事件都没了
                    //$("#dv").off("click mouseenter","p");
                    //p的所有事件全部解绑
                    //$("#dv").off("click","");
                });