创buildJavaScript自定义事件

我想用JavaScript创build一个自定义事件。

我有一个带有WebBrowser的WPF应用程序和一个带有JavaScript的HTML页面。

我使用打印机。 当打印机的状态改变时,它会在.NET中触发一个事件。

然后,我使用WebBrowser控件的InvokeScript函数调用JavaScript方法OnPrinterStateChanged(state)

问题是我必须在我的网页中实现方法OnPrinterStateChanged(state) 。 我不能更改方法的名称或订阅/取消订阅事件…

我想在一个单独的JavaScript文件中移动JavaScript方法OnPrinterStateChanged(state)

我想要的是 :

  • 订阅/取消订阅我的HTML页面中的事件,并决定事件触发时我想要做什么(例如:“ChangeState”)
  • 当.NET事件被触发时,它会调用我单独的.js文件的OnPrinterStateChanged(state) ,然后触发JavaScript事件并调用OnPrinterStateChanged(state)函数。

我find了一些解决scheme,但我没有设法使其工作…什么是最简单的方法来做到这一点?

也许这样?

 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); }); 

另一种解决scheme是使用函数合成,但是很难删除特定的监听器。

 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'); }); 

编辑:

以下是你如何使用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); }); 

我喜欢使用这个EventDispatcher构造函数方法,该方法使用一个虚拟元素来隔离这些事件,以便它们不会在任何现有的DOM元素, windowdocument上被触发。

我正在使用CustomEvent而不是createEvent因为它是更新的方法。 在这里阅读更多 。

我喜欢用这些名称来包装每个本地方法:

onofftrigger

 function EventDispatcher(){ // Create a dummy DOM element var dummy = document.createTextNode(''); // Create custom wrappers with nicer names this.off = dummy.removeEventListener.bind(dummy); this.on = dummy.addEventListener.bind(dummy); this.trigger = function(eventName, data){ if( !eventName ) return; var e = new CustomEvent(eventName, {"detail":data}); dummy.dispatchEvent(e); } } //////////////////////////////////// // initialize the event dispatcher by creating an instance in an isolated way var myEventDispatcher = new EventDispatcher(); //////////////////////////////////// // listen to a "foo" event myEventDispatcher.on('foo', e =>{ console.log(e.type, e.detail); }); //////////////////////////////////// // trigger a "foo" event with some data myEventDispatcher.trigger('foo', 123); 

好的,我find了解决scheme。

我必须将WebBrowser IE版本更改为Internet Explorer 11: http : //weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

接着 :

 function OnPrinterStateChanged(state) { var evt = document.createEvent("Event"); evt.state = state; evt.initEvent("printerstatechanged", true, false); window.dispatchEvent(evt); } window.addEventListener('printerstatechanged', function (e) { // Do something });