How to capture Custom Events from sibling in JS? Is it even possible?

Question

I understand the idea behind capturing and bubbling of events in Js. The event is either being passed to the parents of the dispatching Element or it is passed to the other direction - the child elements of the dispatching Element.

Unfortunately I didn't manage the sibling to receive the custom event dipatched by the element.

Lets say I have following DOM structure:

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

When the button is clicked, it should generate a custom event. And the div with the class "receiver" should receive the event.

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

Unfortunately the event is not received. Is it even possible to receive events from siblings? If it is, how would I do that? To keep it simple I used divs and classes in my Example. I actually use custom elements instead. I guess that doesn't make any change - the concept should be the same...

Answer 1

Is it even possible to receive events from siblings?

No, it isn't.

But, if you know it, you can indicate the receiver's relationship to e.target, like this:

let receiver = e.target.parentNode.previousElementSibling;

receiver.dispatchEvent(customEvent);

---

Working Example (simplified, with a click rather than custom event):

const myButton = document.querySelector('.generator button');

const modifyReceiver = (e) => {

  let receiver = e.target.parentNode.previousElementSibling;

  receiver.style.setProperty('color', 'rgb(255, 255, 255)');
  receiver.style.setProperty('background-color', 'rgb(255, 0, 0)');
  receiver.style.setProperty('font-weight', 'bold');
}

myButton.addEventListener('click', modifyReceiver, true);

div {
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

.receiver {
  font-size: 12px;
  font-family: sans-serif;
  text-transform: uppercase;
}

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