Run results for: Direct invoke vs event listener

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.57

Browser: Chrome 113

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
direct invoke	93998.0 Ops/sec
event listener	2591.8 Ops/sec

Script Preparation code:

function createObj() {
    let value = 0;
    return {
        value
    }
}

function createListeners() {
    return Array.from(Array(100), () => createObj());
}


function directObservable() {
    const lists = [];
    return {
        addListener: (l) => lists.push(l),
        notify: (v) => lists.forEach(x => x.value = v)
    };
}

function eventObservable() {
    const target = new EventTarget();

    return {
        addListener: (l) => target.addEventListener('value', (ev) => l.value = ev.detail),
        notify: (v) => target.dispatchEvent(new CustomEvent('value', {
            detail: v
        }))
    };
}

Tests:

direct invoke
const listeners = createListeners(); const directObs = directObservable(); listeners.forEach(x => directObs.addListener(x)); directObs.notify(1); directObs.notify(2); directObs.notify(3); directObs.notify(1); directObs.notify(2); directObs.notify(3);
event listener
const listeners = createListeners(); const eventObs = eventObservable(); listeners.forEach(x => eventObs.addListener(x)); eventObs.notify(1); eventObs.notify(2); eventObs.notify(3); eventObs.notify(1); eventObs.notify(2); eventObs.notify(3);

Run results for: Direct invoke vs event listener

direct invoke

event listener