Dispatching events to a .subscribe JavaScript method

Question

I've been really stuck on something and I'm coming to you as a last resort. I have a JavaScript file (parent.js) that is loading another .js file (child.js). The parent.js file has an event subscription:

Class.prototype.subscribe('someEvent', someEventHandler)

Very similar to what Facebook does:

FB.Event.subscribe('auth.authResponseChange', auth_response_change_callback);
FB.Event.subscribe('auth.statusChange', auth_status_change_callback);

I'm trying to understand how child.js can dispatch (or broadcast) someEvent so that someEventHandler gets fired.

It seems like everything I see tells about how to add the listener, but nothing about how to dispatch an event to handle the method attached to the listener.

References: API-docs https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.3

Someone with similar resolved issue, but I'm not using Facebook SDK, just using the example to make my objective clearer:

FB.Event.subscribe not firing for certain events

Event dispatching in general: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

There are a couple of things it would be great if you could clarify: #1 are you using another library, or writing your own? #2 it looks like you are calling a function on Class.prototype, which is really not what you'd want. I — Norguard, Apr 23 '15 at 01:33
Thanks for the response. I'm not using another library in my file (child.js). I don't necessarily have access to edit the parent.js code, however it is listening for some events that I'm supposed to dispatch to it _('userDataReady')_. When I try: _dispatchEvent('userDataReady')_ I get an error: _"Failed to execute 'dispatchEvent' on 'EventTarget'..._ — jdubba, Apr 25 '15 at 00:15

score 0 · Answer 1 · answered Apr 23 '15 at 02:29

0

It appears as though you might be using some sort of library that wasn't mentioned.

With that said, here is an example of using custom events with some HTML and pure JavaScript.

HTML...

<button onclick="triggerTheThing()">Trigger the thing</button>
<br />
<span id="listeningElement1">Listening Element</span>

And the JavaScript...

myElement = document.getElementById("listeningElement1");
myElement.addEventListener("triggeredEvent", function (e) {
    this.innerHTML = e.detail.message;
});

function triggerTheThing() {
    var newEvent = new CustomEvent("triggeredEvent", {
        detail: {
            message: "It was triggered!"
        }
    });
    myElement.dispatchEvent(newEvent);
}

One thing that tripped me up while learning this was that you need to dispatch the event on the element listening for the event.

Here's a jsfiddle of it in action: http://jsfiddle.net/4z891LwL/

Props to this guy: http://davidwalsh.name/customevent

answered Apr 23 '15 at 02:29

Phil Walton

963
6
11

Thanks for setting this up, I'm not having an issues with this particular setup, but when I try to dispatch my event to the parent file (the file that's loading my script) i end up getting an error. The event i'm trying to call is associated with a subscribe method like: _FB.Event.subscribe('auth.statusChange', auth_status_change_callback);_ If I understand this _subscribe_ method correctly, that's something like a listener and I'm supposed to dispatch an event like _'auth.statusChange'_ to trigger the callback. Is that right? – jdubba Apr 25 '15 at 00:23
@jdubba `.subscribe(...)` is not a native JS method. Whatever page you saw that in is using a JS library of some sort that implements that method. – Phil Walton Apr 25 '15 at 00:40
Thanks @PhilWalton so would I have to use that same type of method from my child.js ? Meaning would I have to set up some sort of "subscribe event dispatcher" of some sort? The only real examples I've been seeing are with Facebook references and unfortunately, the docs never actually explain how to dispatch. – jdubba Apr 25 '15 at 06:14
@jdubba Here's a breakdown on events. You need a DOM to have events. When an event occurs, it is raised at a specific element in the DOM and bubbles up. For example, there is a school that has rooms, an event might happen in the room that the school is "listening" for (like a fire), but there are events that happen in the room that the school doesn't care about (like desks rearranging). If the fire event is raised in the room, the school will listen for it as it bubbles up and then react to it. This page is super useful on the matter: http://en.wikipedia.org/wiki/DOM_events – Phil Walton Apr 25 '15 at 07:01
Thanks for the information @PhilWalton this works for me when dispatching events, but I think my problem is not really understanding what's really happening with .subscribe. I was thinking it was similar to a listener that I could dispatch an event to. I think I'll have to go back to the drawing board on this. I really appreciate your help though. – jdubba Apr 27 '15 at 04:37

Dispatching events to a .subscribe JavaScript method

1 Answers1