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

有什么想法吗？

Answer 1

我尝试了模具文档示例，但它不起作用。然后，我将“ body”更改为“ window”，现在在控制台中看到了滚动事件。

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

Answer 2

好的，所以我做了一个在此blog post中收听组件发布事件的示例。

但这是一般解决方案。我会使用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) {})

Answer 3

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

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