Прослушивание событий глобального окна в stencilJS

Допустим, у меня где-то в приложении есть что-то подобное:

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

Любые идеи?


javascript stenciljs dom-events
person Dragan Malinovic    schedule 20.11.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я попробовал пример документации по трафарету, и он не сработал. Затем я изменил «тело» на «окно», и теперь я вижу событие прокрутки в консоли.

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

arrow_upward
2
arrow_downward 

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

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

Официальная документация: https://stenciljs.com/docs/events.

person Borongaj    schedule 29.10.2019

arrow_upward
1
arrow_downward

Хорошо, я сделал пример прослушивания события публикации компонентов в этом сообщение в блоге.

Но вот общее решение. Я бы использовал Stencils Event Emitter и испускал из компонента. Допустим, вы делаете это и генерируете событие от вашего компонента под названием fancyEvent ...

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

Чтобы прослушать это событие в окне (т.е. в index.js), вы можете сделать одно из двух. Если у вас есть транспилятор, например машинописный текст, вы можете послушать вот так

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

Но в ванильном javascript в стиле es5 вы также можете прослушивать эти настраиваемые события, как это.

window.addEventListener('fancyEvent', function(e) {})
person Andrew    schedule 27.02.2018