创建 JavaScript 自定义事件 [英] Create JavaScript custom event

问题描述

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

I would like to create a custom event in JavaScript.

我有一个带有 WebBrowser 的 WPF 应用程序，以及一个带有 JavaScript 的 HTML 页面.

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

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

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

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

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

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

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...

我想将 JavaScript 方法 OnPrinterStateChanged(state) 移动到单独的 JavaScript 文件中.

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

我想要的:

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

• 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?

推荐答案

也许是这样的?

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

以下是使用 jQuery 实现的方法.

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

这篇关于创建 JavaScript 自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！