Create JavaScript custom event

Question

I would like to create a custom event in JavaScript.

I have a WPF application with a WebBrowser inside, and a HTML page with JavaScript.

I work with a printer. When the state of the printer changes, it triggers an event in .NET.

Then, I call a JavaScript method OnPrinterStateChanged(state) with the InvokeScript function of the WebBrowser control.

The problem is that I have to implement the method OnPrinterStateChanged(state) in my webpage. I can't change the name of the method or subscribe/unsubscribe to the event...

I would like to move the JavaScript method OnPrinterStateChanged(state) in a separate JavaScript file.

What I want :

• Subscribe/Unsubscribe to the event in my HTML page and decide what I want to do when the event is triggered (ex. : "function ChangeState")
• When the .NET event is triggered, it calls the OnPrinterStateChanged(state) of my separate .js file, then the JavaScript event is triggered and the function ChangeState is called.

I found some solutions but I didn't manage to make it work... What is the simplest way to do it?

Answer 1

Perhaps something like this?

function OnPrinterStateChanged(state) {     var evt = new CustomEvent('printerstatechanged', { detail: state });      window.dispatchEvent(evt); }   //Listen to your custom event window.addEventListener('printerstatechanged', function (e) {     console.log('printer state changed', e.detail); }); 

An alternative solution would be to use function composition, but then it would be hard to remove specific listeners.

function OnPrinterStateChanged(state) {}  function compose(fn1, fn2) {     return function () {         fn1.apply(this, arguments);         fn2.apply(this, arguments);     }; }  //Add a new listener OnPrinterStateChanged = compose(OnPrinterStateChanged, function (state) {     console.log('listener 1'); });  //Add another one OnPrinterStateChanged = compose(OnPrinterStateChanged, function (state) {      console.log('listener 2'); }); 

EDIT:

Here's how you can do it with jQuery.

function OnPrinterStateChanged(state) {     var evt = $.Event('printerstatechanged');     evt.state = state;      $(window).trigger(evt); }   //Listen to your custom event $(window).on('printerstatechanged', function (e) {     console.log('printer state changed', e.state); });