Run results for: event listener test: window vs element - listeners in preparation code w/ separated inputs

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: 2 years ago

Test name	Executions per second
1 event listener on every input(10)	2177.3 Ops/sec
1 window event listener for every input(10)	6643.0 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' />

<input id='window1' />
<input id='window2' />
<input id='window3' />
<input id='window4' />
<input id='window5' />
<input id='window6' />
<input id='window7' />
<input id='window8' />
<input id='window9' />
<input id='window10' />

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');

const window1 = document.getElementById('window1');
const window2 = document.getElementById('window2');
const window3 = document.getElementById('window3');
const window4 = document.getElementById('window4');
const window5 = document.getElementById('window5');
const window6 = document.getElementById('window6');
const window7 = document.getElementById('window7');
const window8 = document.getElementById('window8');
const window9 = document.getElementById('window9');
const window10 = document.getElementById('window10');

///// input biz
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);

// window biz
const listener = (id) => (e) => {
  if (e.target.id === id) {
    console.log(e.target)
  }
}

window.addEventListener('keydown', listener('window1'), false);
window.addEventListener('keydown', listener('window2'), false);
window.addEventListener('keydown', listener('window3'), false);
window.addEventListener('keydown', listener('window4'), false);
window.addEventListener('keydown', listener('window5'), false);
window.addEventListener('keydown', listener('window6'), false);
window.addEventListener('keydown', listener('window7'), false);
window.addEventListener('keydown', listener('window8'), false);
window.addEventListener('keydown', listener('window9'), false);
window.addEventListener('keydown', listener('window10'), false);

Tests:

1 event listener on every input(10)
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)
window1.dispatchEvent(new Event('focus')); window1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window2.dispatchEvent(new Event('focus')); window2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window3.dispatchEvent(new Event('focus')); window3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window4.dispatchEvent(new Event('focus')); window4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window5.dispatchEvent(new Event('focus')); window5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window6.dispatchEvent(new Event('focus')); window6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window7.dispatchEvent(new Event('focus')); window7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window8.dispatchEvent(new Event('focus')); window8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window9.dispatchEvent(new Event('focus')); window9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window10.dispatchEvent(new Event('focus')); window10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));

Run results for: event listener test: window vs element - listeners in preparation code w/ separated inputs

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)