移除事件的绑定 - Newbie_小白

移除事件的绑定
HTML：
<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0;
            font-family: "微软雅黑", "arial", " sans-serif";
            font-size: 16px;
        }

        body {
            margin: 20px;
        }

        #content {
            display: none;
            border: 1px solid #060;
            width: 530px;
            height: 130px;

        }

        button {
            margin: 10px;
            background: silver;
            color: #006600;
            border-radius: 5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">
    </script>

    <script type="text/javascript">
        $(function() {
            $("#btn1").bind("click", function() {
                $("#content").show(3000);
            });
            $("#btn2").bind("click", function() {
                if ($("#content").is(":visible")) {
                    $("#content").hide(1000, showColor);
                } else {
                    $("#content").show(3000, showColor);
                    $("#content").css("background-color", "yellow");
                }
            });

            function showColor() {
                $("#content").css("background-color", "green");
            }
            
            $("#btn3").click(
               function(){
                  $("#btn1").unbind("click");
               }
            );
            
             $("#btn4").click(
               function(){
                  $("#btn2").unbind("click");
               }
            )
            
        });
    </script>
</head>

<body>
<button id="btn1">显示消息</button>
<button id="btn2">特效动画</button>
<br />
<button id="btn3">移除按钮显示消息的事件</button>
<button id="btn4">移除按钮特效动画的事件</button>
<div id="content">
         <pre>           设想在处理事件时，我们需要在一个事件函数中考察一个或者
    多个事件属性。这是一个简单的技术，可以使事件处理函数和作为
    参数传入的事件对象协同工作，或者从window.event 属性中读
    取信息。而且，这个技术不必处理不同的浏览器版本之间的细微
    差别。</pre>
</div>

</body>

</html>
result：
posted on 2016-05-16 11:23 Newbie_小白阅读(178) 评论(0) 编辑收藏举报