jQuery事件的命名空间到底是怎么回事?

jQuery里的bind方法,我们经常使用,不就是绑定事件嘛。可是偶尔会看到一些$.bind("click.xxx", [handler])这样的代码,可能会说,卧槽,不会是写错了吧。可是马上测试代码居然是可以正确运行的。你可能会网上狂阅了一些资料,发现:尼玛这原来是正确的写法,他们称为事件的命名空间。

jQuery事件的命名空间到底是怎么回事?

于是就想试下,这个是原生js支持的吗?写句document.addEventListener("click.xxx", function(){alert("xxx")});跑下发现不通,这个只是jQuery提供的功能而已,果然吊炸天。

给事件加一个命名空间,是否有点画蛇添足?它的应用价值到底在哪里呢?看代码:

$("#layer").bind("click", handler1);
$("#layer").bind("click", handler2);

有时候需要给一个元素的同一个事件绑定两个函数,你可能会说,上面的代码就可以实现啊,但上述代码无法解决两个问题:

1. 解除绑定的时候,虽然unbind的第二个参数可以传入handle来解除相应的绑定,但如果是匿名函数就不方便了。
2. 当我们想手动触发事件的时候,比如:$("#layer").trigger("click"),发现两个函数都被调用了。

假如我们是这么绑定的则无问题:

$("#layer").bind("click.first", handler1);
$("#layer").bind("click.second", handler2);

那么我们只想选择性的去触发,直接$("#layer").trigger("click.second")即可,click.first则不会被触发,那么handle1就不会被调用。

功能是不错,但需要合适的场景,以为大部分元素同一个事件只会被绑定一次,因此这个用法倒也不多见。

可能还有同学问了,那我用的jQuery版本比较高些,经常都是用on和off的,这事件命名空间还能用吗?答案只有两个字:能用。。。

相关阅读