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

问题描述

我想在JavaScript中创建一个自定义事件。

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

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

然后，我调用一个JavaScript方法 OnPrinterStateChanged（state） code>与WebBrowser控件的 InvokeScript 函数。

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

我想移动JavaScript方法 OnPrinterStateChanged （state）在一个单独的JavaScript文件中。

我想要的：

• 订阅/取消订阅我的HTML中的活动页面，并决定在事件触发时我想做什么（例如：ChangeState）


• 当.NET事件被触发时，它调用 OnPrinterStateChanged（state）我单独的.js文件，然后触发JavaScript事件，函数 ChangeState 被调用。

我发现了一些解决方案，但我没有设法使其工作...最简单的方法是什么？

$ b $

  function OnPrinterStateChanged（ state）{
 var evt = new CustomEvent（'printerstatechanged'，{detail：state}）; 
 
 window.dispatchEvent（evt）; 
} 
 
 
 //收听您的自定义事件
 window.addEventListener（'printerstatechanged'，function（e）{
 console.log（'打印机状态改变'，e.detail）; 
}）; 
  

另一种解决方案是使用功能组合，但是很难删除特定的监听器。

 函数OnPrinterStateChanged（state）{} 
 
函数compose（fn1，fn2）{
 return function（）{
 fn1.apply（this，arguments）; 
 fn2.apply（this，arguments）; 
}; 
} 
 
 //添加一个新的监听器
 OnPrinterStateChanged = compose（OnPrinterStateChanged，function（state）{
 console.log（'listener 1'）; 
}）; 
 
 //添加另一个
 OnPrinterStateChanged = compose（OnPrinterStateChanged，function（state）{
 console.log（'listener 2'）; 
}）; 
  

编辑：

使用jQuery来执行。

  function OnPrinterStateChanged（state）{
 var evt = $ .Event（'printerstatechanged'） ; 
 evt.state = state; 
 
 $（window）.trigger（evt）; 
} 
 
 
 //收听您的自定义事件
 $（window）.on（'printerstatechanged'，function（e）{
 console。 log（'printer state changed'，e.state）; 
}）; 
  

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?

解决方案

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

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