jQuery全局侦听自定义事件

Question

我正在尝试做的事情的一个简化版本如下：

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


 // ... later on!

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

我希望indication.bind('custom-event')接收来自function OtherThing的触发器，而这两个人不必显式地了解对方。这个是可能的吗？到目前为止，我唯一的解决方案是将监听器和事件都绑定到主体...这看起来很草率--有没有更好的方法？

Answer 1

在JavaScripts中，在每个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');