Single listener, multiple actions

Single click listener handling multiple actions via data-action.


Click a button above.
<button class="y-btn" data-action="actionOne">Action 1</button>
<button class="y-btn" data-action="actionTwo">Action 2</button>
<button class="y-btn" data-action="actionThree">Action 3</button>

<script>
class YourHandler extends YpsilonEventHandler {
    constructor() {
        super({ body: [{ type: 'click' }] });
    }
    
    handleClick(event, target) {
        if (!target.classList.contains('y-btn')) return;

        const action = target.dataset.action;
        if (!action) return;

        if (typeof this[action] === 'function') {
            this[action](target, event);
        }
    }

    actionOne(target) {/* logic here */}

    actionTwo(target) {/* logic here */}

    actionThree(target) {/* logic here */}
}
</script>