jQuery 中的命名空间事件

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

在 jQuery 中添加事件监听器非常简单。删除事件监听器也同样简单。您可能希望删除监听器,因为您不再关心对该事件执行任何操作,或者是为了减少内存使用,或者两者兼而有之。但是,假设您已将多个监听器附加到同一事件。如何只删除其中一个?命名空间可以提供帮助。

让我们看看代码。

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

当我们选择的元素被点击时,两者 doSomethingdoSomethingElse 都会触发。这很好。这是使用 jQuery 绑定事件而不是超级老式的 onclick 的一个优势,后者会覆盖之前声明的事件处理程序。

现在假设您想删除第一个事件监听器,即触发 doSomething 的那个。您该怎么做呢?

$("#element").off("click");

小心,这会解除这两个处理程序的绑定,而这并非我们想要的结果。

幸运的是,jQuery 会在 .off() 中使用与 .on() 相同的第二个参数。

$("#element").off("click", doSomething);

如果您有实际函数的引用,可以将其作为参数传递,这很好。但是,如果您没有该引用怎么办?可能是因为您不知道它是什么,或者您使用了匿名函数作为处理程序,如下所示

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

如何以安全的方式解除该事件的绑定,而不会意外地解除其他 click 处理程序的绑定?命名空间事件

不要只使用 click 作为事件名称,您可以使用 click.namespace

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

现在,您可以使用带有该确切事件名称的 .off() 来解除它的绑定。

$("#element").off("click.myNamespace");

jQuery 中一些很酷的有用功能之一。即使使用 addEventListenerremoveEventListener 进行现代事件绑定,这也会有点棘手(我认为)。

我最近在我的 用于测试行长的书签 中使用了它。我基本上想在页面上的每个元素上绑定 mouseenter 事件(使用委托),然后当其中一个被点击时,解除这两个事件的绑定。但我希望小心不要解除我没有自己绑定的任何事件。因此,使用了命名空间!

想了解更多关于 jQuery 的知识?我提供 完整的课程