>>> JQuery 事件處理 >>> JQuery 事件處理 一、事件綁定方式 一、事件綁定方式 1、事件綁定的快捷方式： 缺點：綁定的事件，無法取消 2、使用on進行事件綁定 ① 使用on進行單事件綁定 ② 使用on，同時給多個事件綁定同一函數 ③ 使用on，同時給多個事件分別綁定不同的函數 ④ ...
>>> JQuery 事件處理
一、事件綁定方式
1、事件綁定的快捷方式：
缺點：綁定的事件，無法取消
$("button:eq(0)").dblclick(function(){
alert(123);
});
2、使用on進行事件綁定
① 使用on進行單事件綁定
$("button:eq(0)").on("click",function(){ alert(123); }); $("button:eq(0)").off("click"); //解綁
② 使用on，同時給多個事件綁定同一函數
$("button:eq(0)").on("click dbclick mouseover",function(){
console.log(123);
});
③ 使用on，同時給多個事件分別綁定不同的函數
$("button:eq(0)").on({
"click":function(){
console.log("click");
},
"mouseover":function(){
console.log("mouseover");
}
});
④ 使用on，給回調函數傳參，要求是對象格式。傳遞的參數可以在e.data中取到
$("button:eq(0)").on("click",{"name":"zhangsan","age":14},function(e){
console.log(e);
console.log(e.data);
console.log(e.data.name);
console.log(e.data.age);
// console.log(window.event);
});
[事件因數]
$("button:eq(0)").on("click",function(e){
console.log(e);
});
二、使用on事件委派
1、事件委派：將原來綁定在DOM節點上的事件，改為綁在其父節點甚至根節點上，然後委派給當前節點執行
$("p").on("click".function(){});
↓（事件委派）
$(document).on("click","p",function(){});
2、事件委派的作用：
① 將事件直接綁定在根節點上，可以減少事件綁定次數，更加節省資源；
② 使用事件委派綁定的事件，當頁面新增同類型標簽時，新的標簽也可以獲得綁定的已有事件。
三、 使用off() 取消事件綁定
$("button:eq(0)").on("click",function(){
alert(1);
});
function func(){
alert(2);
}
$("button:eq(0)").on("click",func);
$("button:eq(0)").off("click",func); // 只清除綁定了func函數的click事件
$("button:eq(0)").off("click"); // 清除所有的click事件
$("button:eq(0)").off("click dbclick"); // 同時清除多個事件
$(document).off("click","p"); // 清除事件委派
$("p").off(); // 清除綁定的所有事件
四、one() 綁定的事件只能執行一次
$("button:eq(0)").one("click",function(){
alert("只能執行一次");
});
五、其他事件函數
1、.trigger() 自動觸發某個節點綁定的事件
接受兩個參數：
① 需要觸發的事件類型；
② 數組格式：傳遞給事件回調函數的參數
註意：
>>> 事件回調函數的第一個參數，必須是事件對象。因此，我們傳遞的參數從第二個開始接受；
>>> 傳遞的參數，可以使用arguments進行讀取。
2、.triggerHandler()：用法與trigger相同
【triggerHandler 和 trigger 區別】
① triggerHandler不能觸發HTML事件，例如表單的submit事件；
trigger可以觸發所有事件！
② triggerHandler只能觸發所有匹配元素中的第一個元素的事件；
trigger將觸發所有匹配元素的事件！
③ triggerHandler的返回值，是事件回調函數的返回值。如果事件回調函數沒有返回值，則返回Undefined；
trigger的返回值永遠是調用事件的DOM對象。符合JQuery的可鏈式語法！
3、hover()：接受兩個函數，分別表示mouseover() mouseout()兩個事件。
如果只寫一個函數，表示mouseover
$("p:eq(0)").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","blue");
});
4、toggle()
① 不傳參數，表示：當前元素如果為顯示狀態，則隱藏；如果為隱藏狀態，則顯示；
② 傳入一個動畫執行效果： "ease" "slow" "fast"
$("p:eq(0)").toggle("fast");
③ 傳入一個函數，表示：
暗藏動畫或顯示動畫，完成後執行的回調函數。
④ 接受一個Boolean類型的參數，表示：
如果傳入的是true則顯示當前元素；如果傳入的是false則隱藏當前元素。
