javascript - 在 stencilJS 中监听全局窗口事件

Question

假设我在应用程序的某个地方有这样的东西：

var event = new Event('build');
window.dispatchEvent(event);

在 stencilJS 文档中，他们说您可以像这样收听全局事件：

@Listen('body:scroll')
handleScroll(ev) {
    console.log('the body was scrolled', ev);
}

但是我找不到监听窗口上发出的事件的方法，就像我可以用纯 Javascript 监听它一样：

window.addEventListener('build', function (e) { 
  console.log('Event happened',e);
}, false);

有任何想法吗？

score 4 · Accepted Answer

我尝试了模板文档示例，但没有成功。然后我将“body”更改为“window”，现在我在控制台中看到了滚动事件。

@Listen('window:scroll')
handleScroll(ev) {
  console.log('the body was scrolled', ev);
}

score 3 · Accepted Answer

import { Listen } from '@stencil/core';

@Listen('scroll', { target: 'window' })
handleScroll(ev) {
  console.log('the body was scrolled', ev);
}

score 1 · Accepted Answer

好的，所以我在这篇博文中做了一个监听组件发布事件的例子。

但这是一般的解决方案。我会使用 Stencils Event Emitter 并从组件发出。假设您这样做并从您的组件发出一个名为 fancyEvent 的事件......

@Event() fancyEvent: EventEmitter;
...
this.fancyEvent.emit($event);

要在窗口上（即在 index.js 中）收听此事件，您可以执行以下两项操作之一。如果你有打字稿之类的转译器，你可以这样听

@Listen('fancyEvent')
function doSomethingFancy() {}

但是在 vanilla es5 风格的 javascript 中，你也可以像这样监听这些自定义事件。

window.addEventListener('fancyEvent', function(e) {})

3 回答 3