jquery如何解除事件绑定？(2)-木庄网络博客

示例：解除事件绑定

<!doctype html><html>
  <head>
    <meta charset="utf-8">
    <title>jQuery基本操作事件绑定</title>
    <script type="text/javascript" src="js/jquery-1.7.js"> </script>
    <style type="text/css">
        p{width:200px;height:200px;border:1px solid #666;}
        #leftp{float:left; margin:0 auto;}
        #rightp{float:right;}
    </style>
  </head>
  <body>
    <p id="leftp">
        <input type="button" value="bind事件绑定" id="bindBtn"/>
        <input type="button" value="多事件绑定" id="manyBindBtn"/>
        <input type="button" value="delegate事件绑定" id="delegateBindBtn"/>
        <input type="button" value="解除事件绑定" id="removeBindBtn"/>
    </p>
    <p id="rightp">右侧展示区</p>
    <script type="text/javascript">
        $(function(){
            //使用bind()方法绑定事件
            $("#manyBindBtn").bind({
                click:function(){$("#rightp").slideToggle();},
                mouseover:function(){$("#rightp").css("background-color","red");},
                mouseout:function(){$("#rightp").css("background-color","yellow");}
            });
            //使用delegate()方法绑定事件
            $(document).delegate("#delegateBindBtn","click",function(){
                $("#rightp").slideToggle();
            });
            //使用hover()方法绑定事件
            $("#rightp").hover(function(){
                $(this).css("background-color","gray");
            },function(){
                $(this).css("background-color","white");
            });
            //使用on()方法绑定事件
            $("#leftp").on("click","#bindBtn", function(){
                alert("使用bind()方法绑定事件处理");
            });
            //解除事件绑定
            $("#removeBindBtn").on("click",function(){
                //1.使用unbind()解除click事件绑定
                //$("#manyBindBtn").unbind("click");
                //2.使用unbind()解除该元素上的所有事件绑定
                //$("#manyBindBtn").unbind();
                //3.使用off()方法解除bind()方法的click事件绑定
                $("#manyBindBtn").off("click");
                //$(document).off("click","#manyBindBtn");
                //4.使用off()方法解除该元素上的所有事件绑
                //$("#manyBindBtn").off();              
                //5.使用undelegate()方法解除delegate()方法绑定事件
                //$(document).undelegate("#delegateBindBtn","click");
                //6.使用off()方法解除delegate()方法绑定事件
                $(document).off("click","#delegateBindBtn");
                //7.使用off()方法解除on()方法的click事件绑定
                $("#leftp").off("click","#bindBtn");
                //8.使用off()方法解除所有按钮上的所有事件绑定
                $("input[type=button]").off();
            });
        });
    </script>
  </body></html>