javascript

Question

我需要一个解决方案，我正在尝试使用 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"));
    });
}

谢谢！

Answer 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"));
    });
}

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

javascript -how to launch an event from a web component, from outside it

web-component