这篇文章主要给大家介绍jquery事件处理的一些特征，jquery事件命名机制的相关知识，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧
JQuery中的bind()和unbind()，提供了事件的绑定和取消机制，既可以绑定html默认支持的事件，也能够绑定自定义的事件。JQuery支持自定义事件，这显然给编程带来了极大的灵活性。下面就一起学习下，jquery事件处理的一些特性。
1、JQuery中事件可以重复绑定，不会覆盖。
$("#button1").bind("click",function(){alert("func1");});$("#button1").bind("click",function(){alert("func2");});
登录后复制
当点击button1的时候，这2个事件处理函数都会触发。也许你会说，上面绑定的是不同的匿名函数，占用不同的内存空间。的确是这样的，不过就算是同一个处理函数，依然存在重复绑定问题。当button1被点击的时候，下面的事件处理函数同样会被调用2次。
$("#button1").bind("click",sameFunc);$("#button1").bind("click",sameFunc);function sameFunc(){alert("func");}
登录后复制
绝大部分场景下，事件处理函数都只需要绑定一次，所以一定要注意JQuery事件的重复绑定这个特性，事件多次执行，就算没有bug，终究也不是好的做法。
2、使用bind一次绑定多个事件和处理函数。
如果多个事件需要注册相同的处理函数，那么可以使用如下代码进行简化(事件名称使用空格分隔)：
$("#button1").bind("mousedown mouseup",function(){console.log(11);});
登录后复制
如果每个事件的处理函数不同，那么可以使用如下的方式(json对象)：
$("#button1").bind({"mousedown":function(){console.log("mousedown");},"mouseup":function(){console.log("mouseup");}});
登录后复制
3、传递event对象和自定义参数。
一般来说，使用jquery的时候我们很少需要event对象，也不需要向事件处理函数传递自定义的参数。不过如果我们真的需要这么做，JQuery也是支持的。
$("#button1").bind("click", {name:"aty"}, function(eventObject){ alert("params=" + eventObject.data.name); });
登录后复制
eventObject很像IE和FF中的event对象，通过它能够获取事件发生时更详细的信息。如果我们指定了自定义的参数，那么JQuery会将它放在事件对象的data属性中，即通过eventObject.data就能够拿到我们传递的参数值。
4、事件取消的三种形式。
unbind用来取消之前通过bind绑定的事件处理函数，总的来说有三种形式：取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。
假如我们给button1绑定了click、mouseup、mousedown事件，其中click事件绑定2个处理函数。
$("#button1").bind("click",function(eventObj){ console.log("click1"); }); $("#button1").bind("click",function(eventObj){ console.log("click2"); }); $("#button1").bind("mouseup",function(eventObj){ console.log("mouseup"); }); $("#button1").bind("mousedown",function(eventObj){ console.log("mousedown"); });
登录后复制
$(“#button1”).unbind()：取消button1上所有已经绑定的事件处理函数。
$(“#button1”).unbind(“click”)：只取消button1上绑定的click类型的事件处理函数。
这2种形式很好理解，也是我们平时编程最常用的做法。上面的代码我们注册了2个click类型的事件处理函数，如果要取消第2个click事件处理函数，第1个保留，应该怎么办呢？由于我们注册的是匿名函数，所以没有办法实现。下面的代码是错误的，达不到预期的效果。
$("#button1").bind("click",function(eventObj){ console.log("click1"); }); $("#button1").bind("click",function(eventObj){ console.log("click2"); }); // try to cancel function2$("#button1").unbind("click",function(eventObj){ console.log("click2"); });
登录后复制
虽然bind和unbind是用的匿名函数功能是相同的，但是这2个函数不是同一个javascript对象，因为它们占用不同的内存空间。聪明的你可能已经想到：如果bind和unbind使用不同函数，是不是就能达到目的了？确实是这样，下面的代码是正确的。
$("#button1").bind("click",func1); $("#button1").bind("click",func2); // try to cancel function2$("#button1").unbind("click",func2); function func1(){console.log("click1"); }function func2(){console.log("click2"); }
登录后复制
这就是unbind的第三种使用形式，可以看到这种做法非常的不好，因为这种做法不允许使用匿名函数，我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制，个人感觉就是为了解决这个问题。
5、事件命名空间。
上面已经提到，事件命名空间就是为了解决unbind第三种形式遇到的问题。下面是JQuery官方API文档的解释：
Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.
所谓事件命名空间，其实就是在事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间。由于点号是用来定义命名空间的，所以如果我们使用了自定义事件，那么事件名称一定不要包含点号，否则会引起意想不到的问题。这种问题，没有尝试的必要，特殊字符能不用则不用，否则是给自己找麻烦。
$("#button1").bind("click.a",function(eventObj){ console.log("click1"); }); $("#button1").bind("click.b",function(eventObj){ console.log("click2"); }); // success to cancel function2$("#button1").unbind("click.a");
登录后复制
可以看到：使用命名空间，能够以一种更优雅的方式取消某种事件类型下的某个事件处理函数。这里值得一提：使用了命名空间与unbind并不冲突，上面三种形式的unbind依然可以正常使用。$(“#button1”).unbind()依然可以取消button1上的所有事件，$(“#button1”).unbind(“click”)依然可以取消所有的click事件。这种兼容性设计是非常棒的。
使用命名空间还要1个好处：能够按照命名空间来取消事件。
// 2个命名空间a和b$("#button1").bind("click.a",function(eventObj){ console.log("click1"); }); $("#button1").bind("click.b",function(eventObj){ console.log("click2"); }); $("#button1").bind("mouseup.a",function(eventObj){ console.log("mouseup"); }); $("#button1").bind("mousedown.a",function(eventObj){ console.log("mousedown"); });
登录后复制
这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：
方式1：
$("#button1").unbind("click.a");$("#button1").unbind("mouseup");$("#button1").unbind("mousedown");
登录后复制
方式2：
$("#button1").unbind(".a");
登录后复制
很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
jquery获取url参数及url加参数的方法
Jquery ajax技术实现间隔N秒向某页面传值
以上就是关于jQuery事件处理的特征(事件命名机制)的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747608.html
