Слушайте глобальные события на веб-компоненте - PullRequest
Новая
       38

Слушайте глобальные события на веб-компоненте

0 голосов
/ 03 июня 2018

У меня есть main.js, который выполняет вызов API и получает объект ответа.После ответа я хочу запустить событие, которое прослушивает мой пользовательский веб-компонент. 

makeRequest(request).then((response) => { // NOTE: the API in question returns a Promise, thus using 'then()'
   dispatchCustomEvent(response);
});

let dispatchCustomEvent = (response) => {
    console.log('dispatchCustomEvent called', response);
    let myCustomEvent = new CustomEvent('package-ready',
        {
            bubbles: true,
            composed: true,
            detail: response
        }
    );
    return document.dispatchEvent(myCustomEvent);
}

Это событие работает в основном документе.Я подключил слушателя к основному документу для проверки , но он не слышен в моем пользовательском компоненте . 

window.customElements.define('app-list',

    class AppList extends HTMLElement {

        constructor() {
            super();

            let shadowRoot = this.attachShadow({mode: 'open'});

            this.addEventListener('package-ready', e => console.log('package-ready heard on app-list', e.detail));
            shadowRoot.addEventListener('package-ready', e => console.log('package-ready heard on app-list Shadow Root', e.detail));
        }
}

Как вы можете видеть сверху, я прикрепил слушателякак для компонента (с this), так и для его теневого корня (для целей тестирования).

Событие не определено в определенном веб-компоненте.Я подумал, что это может иметь какое-то отношение к фазе захвата событий (и, возможно, добавить еще один флаг в мой объект параметров пользовательских событий.

Я все еще изучаю все входы и выходы веб-компонентов и не выяснил,этот кусок. Любая помощь будет оценена!

1 Ответ

0 голосов
/ 03 июня 2018

Вы отправляете событие на document.Событие никогда не достигнет компонента, так как события не отправляются каждому элементу на странице.

В фазе захвата событие переходит от document к событию, которое его отправило, затем фаза пузыря проходитдерево в другом направлении и идет от элемента, который отправил его обратно к document.

Либо ваш компонент должен добавить свой слушатель события в document, либо ваш код должен измениться на что-то вроде этого: 

makeRequest(request).then((response) => { // NOTE: the API in question returns a Promise, thus using 'then()'
   dispatchCustomEvent(response);
});

let dispatchCustomEvent = (response) => {
    console.log('dispatchCustomEvent called', response);
    let myCustomEvent = new CustomEvent('package-ready',
        {
            bubbles: true,
            composed: true,
            detail: response
        }
    );
    document.querySelectorAll('app-list').forEach(
      el => {
        return el.dispatchEvent(myCustomEvent);
      }
    );
}

Но я бы не стал этого делать.Вместо этого, если событие будет отправлено на document, вы должны прослушать его на document.

...