创建JavaScript自定义事件

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

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

我用打印机工作。当打印机的状态更改时，它会在.NET中触发一个事件

然后，我使用WebBrowser控件的

InvokeScript

函数调用一个JavaScript方法

OnPrinterStateChanged（state）

问题是我必须在我的网页中实现printerstatechanged（state）方法。我无法更改方法的名称或订阅/取消订阅事件

我想将JavaScript方法

OnPrinterStateChanged（state）

移动到一个单独的JavaScript文件中

我想要的是：

• 订阅/取消订阅我的HTML页面中的事件，并决定在触发事件时要执行的操作（例如：“函数更改状态”）
• 当.NET事件被触发时，它调用单独的.js文件的

  OnPrinterStateChanged（state）

  ，然后触发JavaScript事件并调用函数

  ChangeState

---

我找到了一些解决办法，但我没能成功。。。最简单的方法是什么？

也许是这样的

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

另一种解决方案是使用函数组合，但是很难删除特定的侦听器

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

好的，我找到了解决办法

我不得不将WebBrowser IE版本更改为Internet Explorer 11：

然后：

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

---

我喜欢使用这个

EventDispatcher

构造函数方法，它使用一个伪元素隔离事件，这样它们就不会在任何现有的DOM元素上触发，也不会在

窗口或
文档中触发

我使用的是
CustomEvent
，而不是
createEvent
，因为它是较新的
接近

我喜欢用以下名称包装每个本机方法：

打开
，
关闭
，
触发

函数eventDispatcher（）{
//创建一个伪DOM元素，它是一个局部变量
var dummy=document.createTextNode（“”）
//创建具有更好名称的自定义包装
返回{
关（…args）{
dummy.removeEventListener（…args）
还这个
},
关于（…args）{
dummy.addEventListener（…args）
还这个
},
触发器（事件名称、数据）{
如果（！eventName）返回
//如果允许事件冒泡，
//那么“dummy”必须在DOM中
var e=new CustomEvent（eventName，{detail:data}）
虚拟调度事件（e）
还这个
}
}
}
////////////////////////////////////
//通过以隔离方式创建实例来初始化事件调度器
var myEventDispatcher=eventDispatcher（）；
////////////////////////////////////
//听一个“foo”事件
myEventDispatcher
.on（'foo'，e=>console.log（e.type，e.detail））
.on（'bar'，e=>console.log（e.type，e.detail））
////////////////////////////////////
//使用一些数据触发“foo”事件
myEventDispatcher
.触发器（'foo'，123）
.触发器（'bar'，987）要求：ES6


让MyClass=（函数（）{
设_sym=Symbol（'MyClass'）；
类MyClass{
构造函数（）{
这个[_sym]={}；
}
打开（事件、回调）{
此[\uu sym][event]={callback:callback}
}
getError（）{
让event=this[\uu sym]。错误；
if（事件和事件回调）{
回调（'some参数'）；
}
}
}
返回MyClass；
}());
让myClass=新的myClass（）；
myClass.on（'error'，函数（e）{
log（'error:'，e）；
});
log（'获取错误之前：'）；
myClass.getError（）您找到了什么解决方案？请展示你迄今为止的尝试，我发现，但就像我说的，我是一个初学者，我不知道它是否可以做我想要的，在哪里使用这个代码…谢谢你的回答！但我犯了这个错误：“对象不支持属性或方法‘addEventListener’”，知道为什么吗？我用“AttachEvent”（）替换tride，但我有另一个没有详细信息的脚本错误。@Gab在哪个浏览器中？它是WPF的WebBrowser，所以是InternetExplorer@Gab，那么这个嵌入式WebBrowser似乎过时了，并且不支持自定义事件。我建议您使用一个用于定制事件支持的微库，然后使用相同的策略。这里有一些好的，谢谢你，告诉你是否知道这些库中的一个，或者如何使用Jquery来实现它，例如。。。否则，谢谢您记住，
document.createEvent
已被
CustomEvent
或
Event
构造函数替换，您应该使用它。我很肯定IE11支持他们，IE也不支持。您必须使用“老式方式”获得IE支持。IE11确实支持
CustomEvent
@DerickMozilla为不支持
CustomEvent
（基本上只是IE）的浏览器提供了一个解决方案，它不会在
上使用
，并且
触发器
会与jQuery不兼容？不会，因为这些方法是在
EventDispatcher
对象上声明的，而该对象不是jQuery对象。。只有当您使用
EventDispatcher
实例扩展任何jQuery对象时，它才会发生冲突，这是任何人都不会做的，因为它毫无意义。非常有效，谢谢！