Run results for: event listeners window vs input/element via 1 element

Run details:

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

Browser: Chrome 102

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
"on input, 100xs"	3279.0 Ops/sec
"on window, 100xs"	3235.5 Ops/sec
"on window, 1000xs"	370.5 Ops/sec
"on window, 10xs"	3204.7 Ops/sec
"on input, 1000xs"	330.4 Ops/sec
"on input, 10xs"	3062.6 Ops/sec

HTML Preparation code:

<input id='input' />

Tests:

"on input, 100xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); input.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 100; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on window, 100xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); window.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 100; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on window, 1000xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); window.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 1000; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on window, 10xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); window.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 10; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on input, 1000xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); input.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 1000; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on input, 10xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); input.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 10; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }

Run results for: event listeners window vs input/element via 1 element

trigger an event listener on 1 input: - on input: 10, 100 + 1k times - on window: 10, 100 + 1k times

"on input, 100xs"

"on window, 100xs"

"on window, 1000xs"

"on window, 10xs"

"on input, 1000xs"

"on input, 10xs"