emit
Usando el método emit, puedes activar eventos de forma activa, y los eventos activados tienen un mecanismo de propagación. El mecanismo de propagación significa que los eventos se propagan desde los elementos internos hacia los externos, activándose en capas de adentro hacia afuera.
A continuación, se muestra un ejemplo que demuestra cómo usar el método emit para disparar un evento personalizado y utilizar el mecanismo de burbujeo para pasar el evento a elementos externos:
-
I am target
-
-
En este ejemplo, registramos el mismo manejador de evento personalizado custom-event para el elemento <ul> y el elemento <li>. Cuando usamos el método emit para disparar el evento, este evento burbujea desde el elemento <li> hasta el elemento <ul>, disparando los dos manejadores de evento.
Datos personalizados
Al incluir el parámetro data, puedes pasar datos personalizados al manejador de eventos:
-
I am target
-
-
En este ejemplo, pasamos datos personalizados al manejador de eventos a través del parámetro data. El manejador de eventos puede obtener los datos pasados a través de event.data.
No propagar eventos de burbuja
Si no deseas que el evento se propague, puedes incluir el parámetro bubbles: false al activar el evento:
-
I am target
-
-
En este ejemplo, usamos el parámetro bubbles: false para activar un evento personalizado. Este evento no se propaga a los elementos superiores, por lo que solo se activa el manejador de eventos del elemento <li>.
Penetrar el nodo raíz
Por defecto, los eventos no atraviesan el Shadow DOM de los componentes personalizados. Pero puedes permitir que los eventos personalizados atraviesen el nodo raíz y se activen en elementos externos estableciendo composed: true.
{{loggerText}}
En este ejemplo, creamos un componente personalizado composed-test, que contiene un elemento en el Shadow DOM y un botón que dispara un evento. De manera predeterminada, los eventos no atraviesan el Shadow DOM hasta el nodo raíz. Sin embargo, al usar el parámetro composed: true al disparar el evento, permitimos que el evento atraviese hasta el nodo raíz, activando elementos fuera del nodo raíz.