事件
on off bind unbind 事件的绑定和事件移除;
参数1 事件 类似js里面的事件
参数2 执行该事件调用的函数
参数data · 触发事件的时候传递的数据
对象类型的数据 或者说是json类型的数据 类型即是数组型也是对象型;
执行力事件传递的数据在e(事件的执行对象) 获取 data属性;
json集合获取单个值
for (var i = 0; i < e.data.length; i++) {
console.log(e.data[i].name, e.data[i].age, e.data[i].sex, e.data[i].hobby);
}
同一个回调函数里面如何区分事件 借助事件的参数 e event
if (e.type == "click") {
单击的时候移除鼠标进入事件
在事件里面找当前的执行对象 $(this)
off 写一个参数 可以移除指定的事件
fn 不是回调函数 之前你在添加事件的时候将之前的匿名回调转化为基本函数写法 在到off中写移除的函数名称
添加fn 时候和js里面removeeventlisten 参数是一致的 这个参数可写可不写
$(this).off("mouseenter", handle);
}
else if (e.type == "mouseenter") {
console.log("鼠标进入");
}
else {
console.log("鼠标离开");
}
}
off 事件的移除
不写任何参数该元素的所有事件全被移除
$("#btn").off();
bind 绑定事件 unbind 移除事件 和on off一致
:绑定多个事件空格隔开
unbind 移除事件 如果不写参数全部移除
$("#btn").unbind();
on 和 off 中的参数 sel (选择器)
委托 父元素将自身的事件委托给子元素来执行
selector 是一个选择器字符串 $(".box") 直接写 ".box"
$("ul").on("click", ".box", handlelist);
function handlelist() {
点击完成之后移除当前的事件委托
当事件委托之后 事件内部的$(this) 指针发生变化
$("ul").off("click");//·这样写可以移除
$("ul").off("click",".box");也是可以移除的
$("ul").off("click", ".box", handlelist);
}
事件处理
one(type,[data],fn) 一次性事件
var str={"name":"张三"};
var str='abc'; 字符串传递不过去
绑定一次性事件
$("#btn").one("click",str,function (e){});
trigger(type,[data]) 触发指定类型事件 自动触发事件
能写自定义的事件
$("input").on("userclick",function (){
$(this).css({
border:"1px solid red"
});
}).trigger("userclick");
$(“input”).trigger(“select”, [data]);//默认触发选择事件
hover([over,]out)
toggle([spe],[eas],[fn])1.9* 动画的方法
jquery 里面封装的事件方法
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])1.8-
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
浏览器窗口变化事件
$(window).resize(function (){
console.log(1);
}).scroll(function (){
console.log($(this).scrollTop());
console.log("滑动");
});
事件的执行参数
eve.currentTarget 当前点击的目标元素
eve.data //事件传递的数据
eve.delegateTarget1.7+ 在事件委托中 获取委托的元素
eve.isDefaultPrevented() 返回值true/false 是否使用过preventDefault
eve.isImmediatePropag...()
eve.isPropagationStopped() 返回值true/false 是否使用过stopPropagation
eve.namespace
eve.pageX
eve.pageY
eve.preventDefault() 阻止事件的默认行为
eve.relatedTarget
eve.result
eve.stopImmediatePro...()
eve.stopPropagation() 阻止事件冒泡
eve.target 执行事件的目标元素
eve.timeStamp 执行的事件 ms
eve.type 类型
eve.which 键盘上的ascii值 1 是 鼠标
$("ul").on("click",".box",function (e){
$(this) 指向子元素
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; //处理事件冒泡
});
});