Run results for: event listener test: window vs element

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser: Chrome 101

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
1 event listener on every input(10)	29.1 Ops/sec
1 window event listener for every input(10)	16.7 Ops/sec

HTML Preparation code:

<input id='input1' />
<input id='input2' />
<input id='input3' />
<input id='input4' />
<input id='input5' />
<input id='input6' />
<input id='input7' />
<input id='input8' />
<input id='input9' />
<input id='input10' />

Script Preparation code:

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const input4 = document.getElementById('input4');
const input5 = document.getElementById('input5');
const input6 = document.getElementById('input6');
const input7 = document.getElementById('input7');
const input8 = document.getElementById('input8');
const input9 = document.getElementById('input9');
const input10 = document.getElementById('input10');

Tests:

1 event listener on every input(10)
const onKeyDown = (e) => console.log({e}); input1.addEventListener('keydown', onKeyDown, false); input2.addEventListener('keydown', onKeyDown, false); input3.addEventListener('keydown', onKeyDown, false); input4.addEventListener('keydown', onKeyDown, false); input5.addEventListener('keydown', onKeyDown, false); input6.addEventListener('keydown', onKeyDown, false); input7.addEventListener('keydown', onKeyDown, false); input8.addEventListener('keydown', onKeyDown, false); input9.addEventListener('keydown', onKeyDown, false); input10.addEventListener('keydown', onKeyDown, false); input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));
1 window event listener for every input(10)
const listener = (id) => (e) => { if (e.target.id === id) { console.log(e.target) } } window.addEventListener('keydown', listener('input1'), false); window.addEventListener('keydown', listener('input2'), false); window.addEventListener('keydown', listener('input3'), false); window.addEventListener('keydown', listener('input4'), false); window.addEventListener('keydown', listener('input5'), false); window.addEventListener('keydown', listener('input6'), false); window.addEventListener('keydown', listener('input7'), false); window.addEventListener('keydown', listener('input8'), false); window.addEventListener('keydown', listener('input9'), false); window.addEventListener('keydown', listener('input10'), false); input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));

Run results for: event listener test: window vs element

whats faster? - 10 event listeners on window - 1 event listener on 10 inputs

1 event listener on every input(10)

1 window event listener for every input(10)