jQuery全局监听自定义事件

Question

jQuery全局监听自定义事件

10

我尝试做的事情的简化版本如下：

var indication = $('#some-div');
indication.bind('custom-event', function() { ... }


 // ... later on!

 function OtherThing() {
   $(this).trigger('custom-event');
 }

我希望indication.bind('custom-event')可以接收来自function OtherThing的触发，而不需要这两者彼此显式地知道对方。这种情况是否可能？目前我的唯一解决方案是将侦听器和事件都绑定到body上...但这似乎很粗糙—还有更好的方法吗？

- Will

“without the two having to explicitly know about each other”这句话是什么意思？ - Rob W

@RobW - 不确定如何进一步解释，除了阅读代码...我知道我可以将 $(this).trigger 更改为 $('#some-div).trigger 并使其工作，但这违背了初衷。正如我所说，我的当前解决方案是将侦听器和发射器都绑定到 $('body')。 - Will

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael Verger · Accepted Answer

在JavaScript中，每个HTML元素触发的事件都会向其父级传播。因此，要解决您的问题并使任何元素能够处理自定义事件而不出错（例如$('*').bind('custom-event')），需要将侦听器绑定到所有元素的公共父元素上，即body或html元素。

所以，您只需要将事件绑定到body或html元素上。然后，当选择的父元素内部的任何元素触发自定义事件时，它将传播到该父元素。

接着，在事件处理程序中，可以通过访问事件对象的target属性来访问触发事件的元素：event.target 因此，代码应该是：

$('body').bind('custom-event', function(e){
  var $element = e.target;
});

$('#anyElement').trigger('custom-event');