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...

"*Is it even possible to receive events from siblings?*" - no. But you could of course dispatch your custom event on the sibling when the button is clicked. — Bergi, Jul 01 '22 at 21:39

Rounin · Accepted Answer · 2022-07-01T23:08:56.813

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>

Ok thank you. Good to know that you cant't receive events from siblings unless you know the relationship. It was important for me to keep things independent. — Kerem, Jul 02 '22 at 07:56
_**if you know it** [the receiver **element**]_ That kinda defeats the purpose of Events; if you ***know*** a Receiver element, you might as well call methods on _it_ [the receiver] or do something else with _it_. For _Loose Coupling_ with Events Google for **pub/sub** (Publisher/Subscriber) pattern. The point is to use a **common** parent Element as **_EventBus_** — Danny '365CSI' Engelman, Jul 02 '22 at 08:00

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

1 Answers1