1. 程式人生 > 實用技巧 >jquery的事件

jquery的事件

jquery的事件

1.建立事件和刪除事件
需求: 點選之後刪除列印a事件,不刪除列印b事件
分析:刪除事件用off("事件型別") 會全部刪除這個型別的事件
解決:事件型別名稱空間的方法

$("div").on("click.a",function(e){
      console.log("a");
    // console.log(e);
    $(this).off("click.a");//名稱空間可以解決刪除事件的問題
    // 將所有click事件的內容全部刪除
}).on("click.b",function(){
    console.log("b");
}) 

2.事件的傳參

  • 預設事件型別 三個引數,第二個引數是實際 實參可以是變數,可以是物件等
$("div").on("click",a,function(e){   
      console.log(e);
      console.log(e.data) //就是傳進來的引數
}
  • 拋發事件 兩個引數 (事件型別,回撥函式(e,o,f,g,h)) 回撥函式中第二個引數後是形參
$("div").on("chilema", function (e, o) {
    console.log(e, o);
})

$("div").trigger("chilema");//拋發事件    不傳參
$("div").trigger("chilema", { a: 1, b: 10 });    //傳參


//多個引數
$("div").on("chilema",function(e,a,b,c){
    console.log(e,a,b,c);
})
$("div").trigger("chilema",[10,100,1000])




//兩種拋發
$("form").on("submit", function (e) {
    console.log(e);
    return "abc"
})

$("form").trigger("submit");//會觸發預設事件
$("form").triggerHandler("submit");//這個不會觸發預設事件

3.滑過事件 第一個函式是滑過,第二個函式是滑出

$("div").hover(function(){
    $(this).css("backgroundColor","green")   
},function(){
  $(this).css("backgroundColor","red")
})