Custom event en un web components

Hola a todos, hoy os voy a explicar como podemos crear nuestro propios eventos en un webcomponent.

Es posible que en nuestro webcomponent necesitemos que cuando realicemos alguna acción, nosotros podamos desde la aplicación principal saber que se ha realizado esa acción por si queremos hacer alguna acción concreta.

Esto lo podemos hacer con la función dispatchEvent

Veamos este pequeño webcomponent, que es un simple boton al que le crearemos un evento propio al pulsar.

class ExampleEvent extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.render();
        this.attachEventHandlers();
    }
    
    render() {
        const container = document.createElement("div");
        container.innerHTML = `<button class='button'>Pulsame</button>`;

        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.appendChild(container);
    }

    attachEventHandlers() {
        const button = this.shadowRoot.querySelector(".button");
        button.addEventListener('click', e => {
            this.dispatchEvent(new CustomEvent("pulsation"));
            console.log("Me has pulsado (Webcomponent)");
        });
    }
}

customElements.define('ddr-example-event', ExampleEvent);

Lo que nos interesa es esta linea:

this.dispatchEvent(new CustomEvent("pulsation"));

Este CustomEvent hace que creemos un evento personalizado.

A este evento lo podemos llamar asi:

function init(){

    const example = document.querySelector("ddr-example-event");

    example.addEventListener("pulsation", function() {
        console.log("Me has pulsado (Aplicación principal)");
    });
}

window.onload = init;

En el addEventListener, podemos usar nuestro evento «pulsation», que se llamará cuando hagamos click en nuestro botón.

Este es el resultado al pulsar:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.