jQuery 事件的命名空间

用 jQuery 绑定和解绑事件监听器都是很是简单的。可是当你为一个元素的一个事件绑定了多个监听器时，怎样精确地解绑其中一个监听器？咱们须要了解一下事件的命名空间。

看下面这段代码：

$(“#element”)
    .on(“click”, doSomething)
    .on(“click”, doSomethingElse);

像上面这样绑定事件监听器，当元素被点击时，doSomething 和 doSomethingElse 这两个监听器都会被触发。这是使用 jQuery 的一个便利之处，能够随时给元素的同一个事件添加不一样的监听器。不像用 onclick 那样，新的监听器会覆盖旧的。

若是你想解绑其中一个监听器，好比 doSomething，怎么作呢？

是这样吗？

$(“#element”).off(“click”);

注意！上面这行代码会把元素的 click 事件的全部监听器所有解绑，而这并非咱们要的结果。

幸运的是 jQuery 的 .off() 方法能够接受第二个参数，就像 .on() 同样。只要把监听器函数的名字做为第二个参数传入 .off() 方法，就可以解绑指定的监听器。

$(“#element”).off(“click”, doSomething);

可是若是你不知道这个函数的名字，或者你用的是匿名函数：

$(“#element”)
    .on(“click”, function() {
        console.log(“doSomething”);
    });

怎样才能精确地解绑某一个 click 事件监听器呢？该了解一下 jQuery 的事件命名空间了！

先上代码：

$(“#element”)
    .on(“click.myNamespace”, function() {
        console.log(“doSomething”);
    });

这里不仅是把 click 事件做为参数传入 .on() 方法，而是给 click 事件指定了一个命名空间，而后监听了这个命名空间里的 click 事件。此时，即便监听器是匿名函数，实际上它也是“有名”的了。如今你能够像下面这样解绑某一个具体的命名空间里的事件监听器了。

$(“#element”).off(“click.myNamespace”);

这是 jQuery 为咱们提供的又一个方便而强大的功能，它的内部实现确定颇有意思！

编译自：CSS-Tricks