jquery点击事件写法_jQuery的事件绑（bind/unbind）定命名空间

更新时间：2017-10-28 来源：jquery 手机版 字体：大中小

【www.bbyears.com--jquery】

但假设如下情况：需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定，因而理论上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有可能的额外的同一事件绑定逻辑。

这时候如果直接用 .click() / .bind("click") 加上 .unbind("click") 来进行重复绑定的话，被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑，潜在会影响到该元素其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话，可以在unbind的时候提供function作为第二个参数来指定只unbind其中一个处理逻辑，但实际应用中很可能会碰到各种进行匿名函数绑定的情况。

对于这种问题，jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加 .something 来区分自己这部分行为逻辑范围。

比如用 .bind("click.myCustomRoutine",function(){...}); 同样是把匿名函数绑定到 click 事件（你可以用自己的命名空间多次绑定不同的行为方法上去），当unbind的时候用 .unbind("click.myCustomRoutine") 即可释放所有绑定到 .myCustomRoutine 命名空间的 click 事件，而不会解除其他通过 .bind("click") 或另外的命名空间所绑定的事件行为。

同时，使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定，通过 .unbind(".myCustomRoutine") 即可。

要注意的是，jQuery的命名空间并不支持多级空间。因为在jQuery里面，如果用 .unbind("click.myCustomRoutine.myCustomSubone") ，解除的是命名空间分别为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件，而不是 "myCustomRoutine 下的 myCustomSubone 子空间"。

出现的原因

代码如下 $(‘.class’).bind(‘click’, function(){});

*jQuery1.7后，所以有事件建议使用on()来绑定，而不使用bind()了，这样做的目的是为了统一。而解绑就自然是Off()，unbind()相应地也不使用。
当你看源码的时候，可以发现，所有事件都是指回到on()这个方法，也就是所有的事件都可以用on来绑定。
当你想解绑一个特定的click事件，你就遇到麻烦了。因为unbind会解绑所有的click事件。

代码如下 $(‘.class’).unbind(‘click’);

当然还有一种方法，那就是创建一个引用函数。

代码如下 function handler() { … }
$(‘.class’).bind(‘click’, handler);
$(‘.class’).unbind(‘click’, handler);

但是，这不够灵活。

解决方法

代码如下

$(‘.class’).bind(‘click.namespace’, function(){});
$(‘.class’).trigger(‘click.namespace’); // Will trigger
$(‘.class’).trigger(‘click’); // Will trigger
$(‘.class’).trigger(‘click.other’); // Won’t trigger

实例

The Example:

代码如下