noodl-docs/javascript/reference/events.md

hide_title, hide_table_of_contents, title

hide_title	hide_table_of_contents	title
true	true	Noodl.Events

Noodl.Events

Only available on the frontend
This is the Noodl event emitter, you can use it to receive and send events from your scripts. You can learn more about events in the guide.

Noodl.Events.emit(eventName, data)

Send an event. Works well together with Event Receivers.

Noodl.Events.emit("event name", {
  value: "hello",
  someOtherValue: 100,
});

Noodl.Events.on(eventName, callback(data))

Noodl.Events.once(eventName, callback(data))

Receive an event. Works together with Event Senders

Noodl.Events.on("event name", function (eventData) {
  console.log(eventData.value);
});

Noodl.Events.off(eventName, callback(data))

Remove an event handler.

function onEventName(eventData) {
  console.log(eventData.value);
}

Noodl.Events.on("event name", onEventName);
Noodl.Events.off("event name", onEventName);

Features

Listen to Page Router navigation

Here is an example of how you can listen to the Page Router navigation events.

Script.Outputs = {
  Navigated: "signal",
};

function onNavigated({ routerName, path, title, component }) {
  Script.Outputs.Navigated();
}

Script.Signals.DidMount = function () {
  Noodl.Events.on("NoodlApp_Navigated", onNavigated);
};

Script.OnDestroy = function () {
  Noodl.Events.off("NoodlApp_Navigated", onNavigated);
};