天天看點

jquery事件的常用方法2.綁定事件和解除綁定事3.事件的目标和事件冒泡5.自定義事件

單擊按鈕 ,按鈕消失
$(document).ready(function(){     
  $("button").click(function(){         
     $(this).hide();       
  });
});
           
輕按兩下按鈕,按鈕消失
$("button").dblclick(function(){
         $(this).hide();
});
           
滑鼠放上去,按鈕消失
$("button").mouseenter(function(){       
         $(this).hide();
});
           
滑鼠離開,按鈕消失
$("button").mouseleaver(function(){       
     $(this).hide();
});
           

2.綁定事件和解除綁定事

$(document).ready(function(){
        //$("#clickMeBtn").bind("click",clickHandler1);
        //$("#clickMeBtn").bind("click",clickHandler2);
       // $("#clickMeBtn").unbind("click",clickeHandler1);

        $("#clickMeBtn").on("click",clickHandler1);
        $("#clickMeBtn").on("click",clickHandler2);
        $("#clickMeBtn").off("click",clickeHandler1);
    });

   function clickHandler(e){
             console.log("clickHandler1")
  }
  function clickHandler(e){
             console.log("clickHandler2")
   }
           

3.事件的目标和事件冒泡

阻止事件冒泡的API:

event.stopPropagation() //阻止父級的冒泡事件

event.stopImmediatePropagation()// 阻止所有的冒泡事件

5.自定義事件

var ClickMeBtn;
$(doucument).ready(function){
      ClickMeBtn = $("#ClickMeBtn");
      ClickMeBtn.click(function(){
               var e =jQuery.Event("MyEvent");
               ClickMeBtn.trigger(e);
});
     ClickMeBtn.bind("MyEvent",function(event)){
                 console.log(event);
})
});
           

繼續閱讀