javascript - 如何从 Web 组件外部启动事件答案

【问题标题】：javascript -how to launch an event from a web component, from outside itjavascript - 如何从 Web 组件外部启动事件
【发布时间】：2021-06-24 14:07:17
【问题描述】：

我需要一个解决方案，我正在尝试使用 handleEvent 从 Web 组件中触发事件，但我无法：

class MyElement extends HTMLElement {
    connectedCallback() {
        paintElement2(this);
    }

    handleEvent(event) {
        console.log(event.type); // doesn't work
    }
}

customElement.define("my-element", MyElement);

function paintElement2(elementWhoCall) {
    let a = document.createElement("a");
    a.textContent = "click me and launch event inside the caller";
    document.body.appendChild(a);
    a.addEventListener("click", (event) => {
        elementWhoCall.dispatchEvent(new Event("myevent"));
    });
}

谢谢！

【问题讨论】：

尝试先添加事件监听器，然后才将其附加到您的文档中
这仅在 <my-element> 被嵌套在 A 标记内时才有效，因为侦听器位于 A 标记上。并且无处调用handleEvent。 javascript.info/events 是一个很好的学习起点
@liad thx 发表评论

标签： javascript web-component

【解决方案1】：

有两种可能的解决方案：

我认为最好的：

class MyElement extends HTMLElement {
    connectedCallback() {
        this.addEventListener("myevent", this)
        paintElement2(this);
    }

    handleEvent(event) {
        console.log(event.type); 
    }
}

customElement.define("my-element", MyElement);

function paintElement2(elementWhoCall) {
    let a = document.createElement("a");
    a.textContent = "click me and launch event inside the caller";
    document.body.appendChild(a);
    a.addEventListener("click", (event) => {
        elementWhoCall.dispatchEvent(new Event("myevent"));
    });
}

第二个选项：

class MyElement extends HTMLElement {
    connectedCallback() {
        paintElement2(this);
    }

    handleEvent(event) {
        console.log(event.type); // doesn't work
    }
}

customElement.define("my-element", MyElement);

function paintElement2(elementWhoCall) {
    let a = document.createElement("a");
    a.textContent = "click me and launch event inside the caller";
    document.body.appendChild(a);
    a.addEventListener("click", (event) => {
        elementWhoCall.handleEvent(new Event("myevent"));
    });
}

【讨论】：