Entiendo la idea detrás de la captura y burbujeo de eventos en Js. El evento se pasa a los padres del Elemento de envío o se pasa a la otra dirección: los elementos secundarios del Elemento de envío.

Desafortunadamente, no logré que el hermano recibiera el evento personalizado enviado por el elemento.

Digamos que tengo la siguiente estructura DOM:

 <div class="container"> <div class="receiver"></div> <div class="generator"> <button>Click to generate custom Event</button> </div> </div>

Cuando se hace clic en el botón, debería generar un evento personalizado. Y el div con la clase "receptor" debería recibir el evento.

 let button = document.querySelector("button"); let receiver = document.querySelector(".receiver"); receiver.addEventListener("my-customevent",(e)=>{ console.log(e.detail); }); button.addEventListener("click",(e)=> { let customEvent = new CustomEvent("my-customevent",{ detail: "some content", bubbles: true, cancelable: true, composed: false }); button.dispatchEvent(customEvent); });

Lamentablemente no se recibe el evento. ¿Es incluso posible recibir eventos de hermanos? Si es así, ¿cómo lo haría? Para simplificar, utilicé divs y clases en mi Ejemplo. De hecho, uso elementos personalizados en su lugar. Supongo que eso no hace ningún cambio, el concepto debería ser el mismo...