jquery的事件
阿新 • • 發佈:2020-08-11
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")
})