jQuery事件处理了解一下
>>> 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则隐藏当前元素。