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