Global Events and multiple listeners - targeting one - best approach?

[jafin]

I need to write some communication between logic originating in jQuery to trigger an event to an Alpinejs component. I've decided to do this via the raising of an Event attached to window from Query, with listeners in the Alpinejs component.

In this scenario, there are multiple component listeners who can act upon the event, think rows in a table. But only one should actually respond. Lets say jQuery object in row 2 triggered an event, and the Alpinejs component in row 2 needs to listen and react. But there are multiple Alpinejs components all listening for a similar event for every other row.

What would be the preferred approach to target the specific component event listener? Add a tag/prop to the payload to discriminate the target listener?

Other options?

EDIT: OK, I just read: (from https://codewithhugo.com/alpinejs-component-communication-event-bus/)

sing the namespace:event-name convention is especially important if the events you’re emitting are very generic (eg. update, created etc.), collide with a browser event (eg. click, input, submit, select etc.), you want to make it obvious who the intended target is (the listening component) or your listening component listens to multiple types of events. In these cases using a namespaced event will be incredibly useful.

So I assume namespacing the event is the appropriate path forward?

[HugoDF]

Either namespacing or using a property on the event would probably work.