创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元素， window或document上被触发。
我正在使用
CustomEvent而不是createEvent因为它是更新的方法。 在这里阅读更多 。
我喜欢用这些名称来包装每个本地方法：
on ， off ， trigger
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 });
