绑定事件与解绑事件是常用到的写法,这里总结了几种常见的绑定事件与解绑事件的方法。
function test() {
alert("行间事件");
}
缺点:html与js紧密耦合
$("#btn").click(function(){
alert("jquery使用click绑定事件");
})
$("#btn").bind("click",function(){
alert("jquery使用bind绑定事件");
})
$("#btn").on("click",function(){
alert("jquery使用on绑定事件");
})
$("body").on("click","#btn", function () {
alert("jquery使用on可绑定动态元素事件");
})
function test() {
alert("行间事件");
}
这种写法其实可以理解为:
/*点击的时候执行函数*/
document.getElementById("btn").onclick = test;
/*定义函数*/
function test() {
alert("行间事件");
}
那么移除事件就很简单了,一句代码搞定:
document.getElementById("btn").onclick = null;
或者使用jq的方法移除:
$("#btn").prop("onclick",null);
若使用多种写法绑定多个click事件则移除所有的click事件:
$("#btn").prop("onclick",null).off("click");
$("#btn").on("click",function(){
alert("jquery使用on绑定事件");
})
$("#btn").click(function(){
alert("jquery使用click绑定事件");
})
$("#btn").bind("click",function(){
alert("jquery使用bind绑定事件");
})
直接使用unbind方法
$("#btn").unbind("click");
或者使用off方法:
$("#btn").off("click");
$("body").off("click","#btn");
需要注意的是:事件委托写法的解绑的元素需要与事件绑定的目标元素一致(即案例中body,#btn需要一一对应),否则不生效。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品;off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。使用起来更方便,推荐使用。
其中关于off函数的参数说明如下:
/*如果不传参,会移除所有的事件*/
$("#btn").off();
/*如果传递一个参数,会移除这个类型的所有事件*/
$("#btn").off('click');
/*如果传递两个参数,则移除这两个参数指定的事件*/
$("#btn").off('click',test);
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。