Javascript事件被捕获，但回调函数未执行

Question

两个班级听一个事件。当ClassA获取事件时，它会从DOM中删除ClassB并再次将其添加到它之后。 ClassB的事件处理程序由（dis）connectedCallback函数添加和删除。

ClassB仍然在它之后注意到Event，但它不再执行回调函数。

我检查了类B的事件处理程序。它捕获事件并且它具有对其回调函数的引用，但它没有执行它。当我禁用方法qazxsw poof Class时，它可以工作。

removeAdd()

当ClassA的方法

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

。为什么？

/ edit：经过进一步调查后，我注意到完整的事件处理程序在被删除后再次添加并再次添加，因为即使其他新的'TEST'事件也不会触发回调函数，尽管console.log显示引用仍然存在。

Answer 1

this.testEL没有被调用，因为你已经删除了this.testEL中的事件监听器，而另一个箭头函数监听器被调用，因为它从未被删除过。

当事件被提出时调用disconnectedCallback，removeAdd移除元素并再次添加，元素的移除导致removeAdd被调用并且disconnectedCallback监听器消失，add再次导致this.testEL被调用，其注册处理程序但这些处理程序将没有为当前事件传播执行。

例：

connectedCallback

首次单击文档只会显示一个警报（“Hello”）。下一次点击将显示两个警报，之后对于所有点击，它将是另一个“未发生”警报，然后是前一个警报。

Answer 2

箭头功能没有自己的“这个”

所以，你需要做这样的事情：

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

或者只是使用常规功能。