这次博客总结一下jQuery中的事件以及事件的处理。
一、jQuery中的事件
在jQuery中绑定或者移除事件,首先得页面载入完成,即:
$(document).ready(function () {
});
这样会让事件不受影响,正常触发。
事件的绑定和移除
参数eve:事件,类似js里面的事件
参数sel:执行该事件调用的函数
参数data:触发事件的时候传递的数据
on(eve,[sel],[data],fn)–事件绑定
$("#btn").on("click", cla, function (e) {
}//执行力事件传递的数据在e(事件的执行对象)
$("#btn").on("click mouseenter mouseleave", handle);//on 同时绑定多个事件,中间用空格隔开
function handle(e) {//同一个回调函数里面如何区分事件?借助事件的参数:e 、event
if (e.type == "click") {
}
else if (e.type == "mouseenter") {
}
else {
}
}
off(eve,[sel],[fn])–事件移除
$("#btn").off();//不写任何参数该元素的所有事件全被移除
bind(type,[data],fn)–事件绑定,和on用法一致
unbind(t,[d|f])–事件移除,和off用法一致
二、事件的处理
1、one(type,[data],fn)— 一次性事件
var str=[1,2,3];
$("#btn").one("click",str,function (e){
console.log(e.data);
});
2、trigger(type,[data])—触发指定类型事件,自动触发事件
$("input").trigger("focus");
3、自定义事件:
$("input").on("userclick",function (){
$(this).css({
border:"1px solid red"
});
}).trigger("userclick");
4、事件的切换
hover([over,]out)
$(".block").hover(function (){
//over
console.log("鼠标悬停");
},function (){
//out
console.log("鼠标离开");
});
//等价于下面的写法
$(".block").on("mouseover mouseout",function (){
console.log(1);
});
toggle([spe],[eas],[fn])–按顺序执行
$(".block").toggle(function (){
console.log(1);
},function (){
console.log(2);
},function (){
console.log(3);
});
5、jQuery的事件汇总
blur([[data],fn]);//当元素失去焦点时触发 blur 事件。
change([[data],fn]);//当元素的值发生改变时,会发生 change 事件。
click([[data],fn]);//触发每一个匹配元素的click事件。
dblclick([[data],fn]);//当双击元素时,会发生 dblclick 事件。
error([[data],fn]);//当元素遇到错误(没有正确载入)时,发生 error 事件。
focus([[data],fn]);//当元素获得焦点时,触发 focus 事件
focusin([data],fn);//当元素获得焦点时,触发 focusin 事件。
focusout([data],fn);//当元素失去焦点时触发 focusout 事件。
keydown([[data],fn]);//当键盘或按钮被按下时,发生 keydown 事件。
keypress([[data],fn]);//当键盘或按钮被按下时,发生 keypress 事件。
keyup([[data],fn]);//当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn]);//当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mouseenter([[data],fn]);//当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mousemove([[data],fn]);//当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mouseout([[data],fn]);//当鼠标指针从元素上移开时,发生 mouseout 事件。
mouseover([[data],fn]);//当鼠标指针位于元素上方时,会发生 mouseover 事件。
mouseup([[data],fn]);//当在元素上放松鼠标按钮时,会发生 mouseup 事件。
resize([[data],fn]);//当调整浏览器窗口的大小时,发生 resize 事件。
scroll([[data],fn]);//当用户滚动指定的元素时,会发生 scroll 事件。
select([[data],fn]);//当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
submit([[data],fn]);//当提交表单时,会发生 submit 事件。
三、事件的执行参数
eve.currentTarget //当前点击的目标元素
eve.data //事件传递的数据
eve.delegateTarget //在事件委托中 获取委托的元素
eve.isDefaultPrevented() //返回值true/false 是否使用过preve
eve.isImmediatePropag...() //根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
eve.isPropagationStopped() //返回值true/false 是否使用过stop
eve.namespace //当事件被触发时此属性包含指定的命名空间。
eve.pageX //鼠标相对于文档的左边缘的位置。
eve.pageY //鼠标相对于文档的顶部边缘的位置。
eve.preventDefault() //阻止事件的默认行为
eve.relatedTarget //在事件中涉及的其它任何DOM元素。
eve.result //这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined 。
eve.stopImmediatePro...() //阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。
eve.stopPropagation() //阻止事件冒泡
eve.target //执行事件的目标元素
eve.timeStamp //执行的事件 ms
eve.type //类型
eve.which //键盘上的ascii值 值为 1 是鼠标
用法:
$("ul").on("click",".box",function (e){
console.log(e.delegateTarget);//获取委托元素
});
$(window).mousedown(function (e){
console.log(e.which); //输出ascii值
});
四、时间的冒泡和处理
处理事件的冒泡--------用事件参数
$(function (){
$("div").click(function (e){
console.log(1);
//e.stopPropagation(); //处理事件冒泡
console.log(e.isPropagationStopped());
return false; //处理事件冒泡
});
});
五、总结
jQuery中的事件和JS中的事件相似度很大,但是写法上又有一些不同,在记忆和使用的时候一定要注意格式写法规范。事件在jQuery中用处很多,需要熟练掌握。