Having a dispatchEvent triggered on an object how can I find out how to listen to it and where the event is dispatched?

Question

I have some code build by someone else and I am trying to alter some form values when an event is dispatched

Here is the line of code

_instance.dispatchEvent ( "ADD_ROW",  { 'container' : $li, 'value' : data } );

What I can't seem to do on a global level is do something like this

someGlobalVariable.addEventListener('ADD_ROW', function (e) { console.log(11111); }, false);

or

document.querySelector('body #an_id').addEventListeneraddEventListener('ADD_ROW', function (e) { console.log(11111); }, false);

I don't know where the ADD_ROW is added or what global object I have to look at.

_instance looks like this on console.log

Object { _listenerMap: Object, indexOfListener: AbstractEventDispatcher/instance.indexOfListener(), addEventListener: AbstractEventDispatcher/instance.addEventListener(), removeEventListener: AbstractEventDispatcher/instance.removeEventListener(), hasEventListener: AbstractEventDispatcher/instance.hasEventListener(), dispatchEvent: AbstractEventDispatcher/instance.dispatchEvent(), release: AbstractEventDispatcher/instance.release(), rowCount: JSONFieldSetList/_instance.rowCount(), addRow: JSONFieldSetList/_instance.addRow(), deleteRow: JSONFieldSetList/_instance.deleteRow(), 4 more… }

Is there a way I can track what is happening and where the event is dispatched?

Answer 1

This _instance object, is it part of some framework? or is it just some local variable somewhere and you don't know how it was created?

Regardless, if its dispatchEvent method behaves as defined in the EventTarget interface , then the object referenced by _instance is the target. An object doesn't need to be a node, or in the DOM, to be a valid event target, it only needs to implement EventTarget. For example, XHR objects and EventSource objects can listen to DOM events, yet those events will not traverse the HTML DOM to get there.

Can you not just add your listener to _instance or keep a global reference to _instance ?

Answer 2

I manage to solve it by adding my own event.

$li.trigger('ADD_ROW');

+

$('body').on('ADD_ROW', '.multi-field-set-bottom-links.row.multi-field-set-row', function(){});

Thx