bind()和 unbind()绑定解绑事件的使用 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <style> 
        /*测试3*/
     /*p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
     p.over {background:#ccc;}
     span {color:red;}*/ 
     
     /*测试4*/
     
    </style>
    <body>
    <!--//测试1,2-->
    <!--<div><input id="BtnFirst"type="button"value="Click Me"/></div>
    <div id="TestDiv"style=" width:20px; height:20px; display:none;  background: red;"></div>-->
    
  <!--  // 测试3
    <p>Click or double click here.</p>
    <span></span>-->
    
    <!--/*测试4*/-->
     <!--<div onclick="MyClickOut()">
      <div onclick="MyClickInner()">
       <span id="MySpan">I love JQuery!! </span>
      </div>
     </div>
     <span id="LooseFocus">失去焦点</span>-->
     
     <!--冒泡事件-->
      <div onclick="MyClickOut()">
      <div onclick="MyClickInner()">
        <span id="MySpan">
         I love JQuery!!
        </span>
      </div>
     </div>
        
    
    
    </body>
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script>
  /*      //1.第一个简单的bind ()事件---Hello Word
        //.Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为,如点击事件
        $(function() {
            $("#BtnFirst").bind("click", function() {
                alert("Hello World");
            });
        })*/
        
        //2.绑定多个事件
/*        //我们可以通过bind()来绑定多个事件（其实，这也就是JQuery以及Linq中非常有名的链式编程）。
        //实现的主要功能就是当我们点击的时候，弹出“Hello World”，当离开button的时候，显示出一个div。
        $(function () {
            $("#BtnFirst").bind("click", function () {
              alert("Hello World");
            }).bind("mouseout", function () {
              $("#TestDiv").show("slow");
            });
        })*/
        // 测试3    3.bind()事件的对象
    /*     Handler这个回调函数可以接受一个参数，当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。
         这个事件对象通常是没有必要且可以省略的参数，因为当这个事件处理函数绑定的时候就能够明确知道他在触发的时候应该做些什么，
         通常就已经可以获得充分的信息了。然而在有些时候，在事件初始化的时候需要获取更多关于用户环境的信息。*/
/*        $("p").bind("click", function(event){ debugger
            var str = "( " + event.pageX + ", " + event.pageY + " )";
            $("span").text("Click happened! " + str);
        });
        $("p").bind("dblclick", function(){
            $("span").text("Double-click happened in " + this.nodeName);
        });
        $("p").bind("mouseenter mouseleave", function(event){
            $(this).toggleClass("over");
        });
            */    
/*        4.unbind()事件
        unbind([type],[data]，Handler) 是 bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
        如果没有参数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑 定。
        如果提供了事件类型作为参数，则只删除该类型的绑定事件。
        如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。*/
/*        function MyClickOut() {
         alert("outer Div");
        }
        function MyClickInner() {
         alert("Inner Div");
        }
        function MyBodyClick() {
         alert("Body Click");
        }
        var foo = function () {
         alert("I'm span.");
        }
        $(function () {
         $("#MySpan").bind("click", foo);
        })  
        $(function () {
         $("#LooseFocus").unbind("click", foo);
        })*/
            
        // 冒泡事件
//        简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，
//        它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。
         function MyClickOut() {
          alert("outer Div外面");
         }
         function MyClickInner() {
          alert("Inner Div里面");
         }
         function MyBodyClick() {    
          alert("Body Click");
         }
         $(function () {
            $("#MySpan").bind("click", function (event) {
               alert("I'm span");
               //event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
               event.stopPropagation();
            });
         })
    </script>

</html>

 

posted on 2019-07-05 15:44  小白菜好吃  阅读(1036)  评论(0)    收藏  举报

导航