JQuery中的bind()和unbind()的理解「建议收藏」
bind()和unbind()提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件。
1、JQuery中事件可以重复绑定,不会覆盖。
1 $("#button1").bind("click",function(){
2 alert("func1");
3 });
4 $("#button1").bind("click",function(){
5 alert("func2");
6 });
1 $("#button1").bind("click",sameFunc);
2 $("#button1").bind("click",sameFunc);
3
4 function sameFunc()
5 {
6 alert("func");
7 }
当点击button1的时候,这2个事件处理函数都会触发。上面绑定的是不同的匿名函数,占用不同的内存空间。就算是同一个处理函数,依然存在重复绑定问题。当button1被点击的时候,上面的事件处理函数同样会被调用2次。
2、使用bind一次绑定多个事件和处理函数。
如果多个事件需要注册相同的处理函数,那么可以使用如下代码进行简化(事件名称使用空格分隔):
1 $("#button1").bind("mousedown mouseup",function(){
2 console.log(11);
3 });
如果每个事件的处理函数不同,那么可以使用如下的方式(json对象):
1 $("#button1").bind(
2 {
3 "mousedown":function(){
4 console.log("mousedown");
5 },
6 "mouseup":function(){
7 console.log("mouseup");
8 }
9 }
10 );
3、传递event对象和自定义参数
1 $("#button1").bind("click", {name:"aty"}, function(eventObject){
2 alert("params=" + eventObject.data.name);
3 });
eventObject很像IE和FF中的event对象,通过它能够获取事件发生时更详细的信息。如果我们指定了自定义的参数,那么JQuery会将它放在事件对象的data属性中,即通过eventObject.data就能够拿到我们传递的参数值。
4、事件取消的三种形式。
unbind用来取消之前通过bind绑定的事件处理函数,总的来说有三种形式:取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。
1 $("#button1").bind("click",func1);
2 $("#button1").bind("click",func2);
3
4 // try to cancel function2
5 $("#button1").unbind("click",func2);
6
7 function func1()
8 {
9 console.log("click1");
10 }
11
12 function func2()
13 {
14 console.log("click2");
15 }
$(“#button1”).unbind():取消button1上所有已经绑定的事件处理函数。
$(“#button1”).unbind(“click”):只取消button1上绑定的click类型的事件处理函数。
虽然bind和unbind是用的匿名函数功能是相同的,但是这2个函数不是同一个javascript对象,因为它们占用不同的内存空间。可以看到这种做法非常的不好,因为这种做法不允许使用匿名函数,我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制
5、事件命名空间。
所谓事件命名空间,其实就是在事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。
1 $("#button1").bind("click.a",function(eventObj){
2 console.log("click1");
3 });
4 $("#button1").bind("click.b",function(eventObj){
5 console.log("click2");
6 });
7
8 // success to cancel function2
9 $("#button1").unbind("click.a");
可以看到:使用命名空间,能够以一种更优雅的方式取消某种事件类型下的某个事件处理函数。这里值得一提:使用了命名空间与unbind并不冲突,上面三种形式的unbind依然可以正常使用。(“#button1”).unbind()依然可以取消button1上的所有事件,(“#button1”).unbind(“click”)依然可以取消所有的click事件。
1 $("#button1").unbind("click.a");
2 $("#button1").unbind("mouseup");
3 $("#button1").unbind("mousedown");
4 $("#button1").unbind(".a");
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167571.html原文链接:https://javaforall.cn
相关文章
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- jquery导航菜单「建议收藏」
- 简述vue和jquery的区别「建议收藏」
- JQuery-学习笔记03【基础——DOM操作】「建议收藏」
- vue和jQuery一起使用「建议收藏」
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- 12个用得着的JQuery代码片段详解编程语言
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jQuery Fancybox插件介绍详解编程语言
- jquery基础知识汇总详解编程语言
- jQuery toggle()方法的用法
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- Jquery实战_读书笔记1—选择jQuery
- 基于jquery创建的一个图片、视频缓冲的效果样式插件
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- jquery简单实现滚动条下拉DIV固定在头部不动
- 一个js导致的jquery失效问题的解决方法
- 使用jQuery和PHP实现类似360功能开关效果
- jquery实现网页查找功能示例分享
- 22点关于jquery性能优化的建议
- jquery获取radio值实例
- 分享2个jQuery插件--jquery.fileupload与artdialog
- jquery实现拖拽调整Div大小