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 的触发器，而无需两者明确了解彼此。这可能吗？到目前为止，我唯一的解决方案是将侦听器和事件都绑定到 body ......这似乎很草率 - 有没有更好的方法？

Answer 1

在 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');