jQuery—解除事件
常见的解除事件有三种,选用时,往往取决与你绑定事件所用的关键字:
一、常用解除绑定事件
举例:
//绑定事件,使用id选择器给btn1绑定点击事件
$("#btn1").click(function(){
console.log("点击事件")
}).mouseenter(function(){
console.log("鼠标聚焦事件")
})
//点击第二个按钮,解除第一个按钮事件
$("#btn2").click(function(){
$("#btn1").off("mouseenter"); //这里是解绑函数,使用off函数,可以添加参数解绑一个绑定事件,或者不加参数,默认都解绑
console.log("第一个按钮事件解绑")
})
效果显示:
注意:
off函数参数可选,当只写一个事件名称时候,则解除相对应的事件,当无参数时,默认解除该元素的所有绑定事件。
二、on函数解除绑定事件
on函数绑定事件和常用绑定事件的解除绑定都可以使用off函数。
举例:
//绑定事件,使用id选择器给btn1绑定点击事件
$("#btn1").on("click",function(){
console.log("点击事件")
}).on("mouseenter",function(){ //注意这里的on函数的链式编程
console.log("鼠标聚焦事件")
})
//点击第二个按钮,解除第一个按钮事件
$("#btn2").click(function(){
$("#btn1").off("mouseenter"); //这里是解绑函数,使用off函数,
console.log("第一个按钮聚焦事件解绑")
})
效果展示:
注意
:这里on函数的链式编程需要注意,具体的off函数使用规则和上一个例子相同。
三、bind函数解除绑定事件
$("#btn1").bind({"click":function(){
console.log("点击事件")
},
"mouseenter":function(){
console.log("鼠标聚焦事件")
},
"mouseleave":function(){
console.log("鼠标离焦事件")
}})
$("#btn2").bind("click",function(){
$("#btn1").unbind("click"); //unbind解除了所有的绑定事件
console.log("解除点击事件")
})
效果展示:
可以发现这里的unbind函数也是和off函数如出一辙,有参数时解除参数对应的事件,无参数则解除该元素的所有绑定事件。
思考
思考:那么off和unbind函数可以换着用吗?
答案:可以换着用。
演示代码如下:
$("#btn1").on("click",function(){
console.log("点击事件")
}).on("mouseenter",function(){
console.log("鼠标聚焦事件")
}).on("mouseleave",function(){ //注意这里的on函数的链式编程
console.log("鼠标失焦事件")
})
$("#btn2").bind("click",function(){
$("#btn1").unbind("click"); //unbind解除了所有的绑定事件
console.log("解除点击事件")
})
效果展示:
四、delegate函数解除绑定事件
delegate函数主要是针对父子节点进行绑定事件的,具体可以参看我的另一篇文章—《jQuery—绑定事件》
举例:
$("div").delegate("p","click",function(){
console.log("p标签---鼠标-点击-事件")
}).delegate("p","mouseenter",function(){
console.log("p标签---鼠标-聚焦-事件")
}).delegate("button","mouseenter",function(){
console.log("按钮---鼠标-聚焦-事件")
}).delegate("button","click",function(){
console.log("按钮---鼠标-点击-事件")})
$("#btn2").click(function(){
$("div").undelegate("button","click")
console.log("button解除点击事件")
})
效果展示:
注意
delegate
的使用场景,它一般在绑定含有父子节点关系的标签上的作用比较大,注意这里的参数第一个和第二个参数同时写,是解除指定标签的指定事件,同时不写,是解除父标签下的所有标签的所有事件,写一个参数或者是两个以上参数,undeleagte函数不发挥作用
。
五、总结
函数 | 备注 |
---|---|
off(“事件名称”) | 写一个参数,解除该标签的指定事件 |
off() | 不写参数,解除该标签的所有事件 |
unbind(“事件名称”) | 写一个参数,解除该标签的指定事件 |
unbind() | 不写参数,解除该标签的所有事件 |
undelegate(“标签名称”,“事件名称”) | 写亮个参数,解除指定标签类的指定事件 |
undelegate() | 不写参数,解除父标签下的所有标签的所有事件 |
以上例子中涉及的绑定事件以及链式编程,可以参看我的其他两篇文章《jQuery—绑定事件》和《jQuery—链式编程》