Событие Javascript перехвачено, но функция обратного вызова не выполняется - PullRequest
Новая
       12

Событие Javascript перехвачено, но функция обратного вызова не выполняется

0 голосов
/ 22 марта 2019

Два занятия слушают одно событие.Когда ClassA получает событие, оно удаляет ClassB из DOM и добавляет его сразу после него.Обработчики событий ClassB добавляются и удаляются функциями (dis) connectedCallback.

ClassB по-прежнему замечает событие сразу после него, но больше не выполняет функцию обратного вызова.

Iпроверил обработчик событий ClassB.Он перехватывает событие и имеет ссылку на свою функцию обратного вызова, но не выполняет его.Когда я отключаю метод removeAdd() класса А, он работает. 

class ClassA {
    constructor() {
        window.addEventListener('TEST', this.removeAdd);    
    }

    removeAdd() {
        document.body.removeChild(testclass);
        document.body.appendChild(testclass);
    }
}
new ClassA();

class ClassB extends HTMLElement {
    constructor() {
        super();
        console.log("constructed");

        var shadow = this.attachShadow({mode:'open'});
        shadow.appendChild(document.createElement('TEXTAREA'));

        this.testEL = () => { this.test(); };
    }

    connectedCallback() {
        console.log("connected");
        window.addEventListener('TEST', () => { console.log('TEST heared', this.testEL.toString()); });
        window.addEventListener('TEST', this.testEL);
    }

    disconnectedCallback() {
        console.log("disconnected");
        window.removeEventListener('TEST', this.testEL);
    }

    test() {
        console.log('callback', this);
       }
}
customElements.define('test-class', ClassB);

var testclass = new ClassB();
document.body.appendChild(testclass);

function fevent() {
    var ev = new Event('TEST');
    window.dispatchEvent(ev);
}
fevent();

Это вывод, когда метод removeAdd() класса А закомментирован: 

constructed
connected
TEST heared () => { this.test(); }
callback <test-class>

Этовывод с полным кодом: 

constructed
connected
disconnected
connected
TEST heared () => { this.test(); }

Но он не выполняется this.testEL.Почему?

/ edit: После дальнейших исследований я заметил, что обработчик событий завершает работу после удаления и добавления снова, поскольку даже дополнительные новые события 'TEST' не вызывают функцию обратного вызова, хотя console.log показывает, чтоссылка все еще там.

Ответы [ 2 ]

1 голос
/ 23 марта 2019

this.testEL не вызывается, потому что вы удалили прослушиватель событий в disconnectedCallback, а другой слушатель функции стрелки вызывается, потому что он никогда не удалялся.

removeAdd вызывается, когдасобытие происходит, removeAdd удаляет элемент и добавляет снова, удаление элемента вызывает вызов disconnectedCallback и прослушиватель this.testEL исчезает, добавление снова вызывает вызов connectedCallback, который регистрирует обработчики, НОэти обработчики не будут выполняться для текущего распространения события.

Пример: 

function eventHandler() {
    alert("Hello");
    document.addEventListener('click', () => window.alert("Not happening")) 
}
document.addEventListener('click', eventHandler)

При первом щелчке по документу отобразится только одно предупреждение («Привет»).Следующий щелчок покажет оба оповещения, после этого для всех щелчков это будет еще одно из предупреждений «Не происходит», чем предыдущее.

0 голосов
/ 23 марта 2019

Функции стрелок не имеют своих "this"

Итак, вам нужно либо сделать что-то вроде этого: 

window.addEventListener('TEST', this.testEL.bind(this));

Или просто используйте обычную функцию.

...