# Event Re-routing

Event Listeners are expensive, so to reduce memory footprint web atoms provides event re-routing.

Click event is captured by the document, if the default is not prevented, web atoms will search for `data-click-event` attribute from the given target to all the way to body.

Then it will create a new CustomEvent with the value of `data-click-event` attribute. And it will fire the event again from the same original event's target.

In the detail property of custom event, you will be able to query any data attribute that are present on the target or any ancestor of the target.

```jsx
export default class EventSample extends ContentPage { 

    init() {
        this.render(<div
            data-layout="row"
            data-label="One">
            <button
                data-click-event="button-click"
                text="Button one"
                />
            <button
                data-click-event="button-click"
                text="Button Three"
                />
            <button
                data-click-event="button-click"
                data-label="Two"
                text="Button Two"
                />
        </div>);
    }

    @Action({ onEvent: "button-click"})
    buttonClick({ label }) {
        this.alert(`Button ${label} was clicked`);
    }
}
```

In this example we are creating single event handler. Notice that for both first and second button, there is no label, but the event handler will get the label from the parent.

This will help in reducing all the event handlers to simple string based attributes.

## Repeater
When we deal with multiple items, we use `AtomRepeater`, and inside `AtomRepeater`, instead of `data-*` attributes, CustomEvent's detail will
contain the actual item represented by the list.

# Sample
For more, please visit,
https://stackblitz.com/~/github.com/web-atoms-samples/event-re-routing