jQuery全局监听自定义事件

时间:2012-03-20 17:48:03

标签: jquery events custom-event

我正在尝试做的简化版本如下:

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


 // ... later on!

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

我希望indication.bind('custom-event')function OtherThing接收触发器,而两者不必明确了解彼此。这可能吗?到目前为止,我唯一的解决方案是将侦听器和事件绑定到正文......这看起来很草率 - 有更好的方法吗?

1 个答案:

答案 0 :(得分:21)

在JavaScripts中,每个HTML元素上触发的事件都会传播到它们的父元素,因此,为了解决您的问题并使任何元素能够处理自定义事件而不会出现像$('*').bind('custom-event')那样的错误来绑定监听所有元素的共同父级,bodyhtml元素:]

因此,您只需要将事件绑定到bodyhtml元素。然后,当在选择的父元素内的任何元素触发自定义事件时,它将传播到该父元素。

然后,在事件处理程序中,您可以通过访问事件对象的target属性来访问触发事件的元素:event.target

所以,代码应该是:

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

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