How to implement event listener for any objects in JavaScript

Question

I want to implement custom event with this functionality:

create custom event
after callback of ajax dispatch event
any object in document (div, grid, ...) can register listener of this custom event
when event is fired, all objects which have registered listener event call any methods

I tried created custom event (no problem):

var eventFilterRefresh = document.createEvent("CustomEvent");
eventFilterRefresh.initEvent("onFilterCancel", true, true);

Register event:

var dv = document.getElementById('myDiv');
dv.addEventListener('onFilterCancel', function (e) {
    alert();
}, false);

Dispatch event - here is problem. I don't wont call dispatchEvent on conrete object. I want call generaly dispatchEvent and all objects which have registered event makes methods:

var myDiv= document.getElementById('myDiv');
myDiv.dispatchEvent(eventFilterCancel);

Thanks.

Perhaps a pubsub library is what you need?

Ja͢ck
– Ja͢ck

2015-02-26 07:56:11 +00:00
Commented Feb 26, 2015 at 7:56 — Ja͢ck
– Ja͢ck, Commented Feb 26, 2015 at 7:56

Will Reese · Accepted Answer · 2015-02-26 07:52:06Z

2

There is no way to fire an event from a single context so that listeners bound to a variety of other elements will trigger on it. You will need to fire the event from the context of each of the elements with the relevant listener.

The easiest way to do this is to add a hook like a class name to all of the elements that have the event listener and then use that hook to dispatch the event for each element.

//Add a hook when you register the listener
var dv = document.getElementById('myDiv');
dv.addEventListener('onFilterCancel', function (e) {
    alert();
}, false);
dv.className += " js-filter-cancel";

//Use the hook to fire the event for all listeners
var myDivs= document.querySelectorAll('.js-filter-cancel');

for(var i in myDivs) {
  if(!myDivs.hasOwnProperty(i))
    continue;
  
  myDivs[i].dispatchEvent(eventFilterCancel);
}

answered Feb 26, 2015 at 7:52

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement event listener for any objects in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related