Benchmark: event listener test: window vs element

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' />

AخA
 
<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');

 
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'}));
x

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'}));
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'}));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
1 event listener on every input(10)
1 window event listener for every input(10)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's break down what is tested in the provided benchmark:

Benchmark: event listener test: window vs element

The benchmark compares the performance of two approaches:

Adding 10 event listeners to individual HTML elements: This involves creating 10 input elements and adding an event listener to each one using addEventListener. The event listener logs the e object (an event) to the console.
Adding 1 global event listener to the window object for all 10 elements: This involves creating a single function that will be called whenever any of the 10 elements receives an event, and then adding this function as an event listener to the window object using addEventListener. The event listener logs the e object (an event) to the console.

Options being compared:

Adding multiple event listeners vs. a single global event listener
Performance differences between these two approaches

Pros and Cons of each approach:

Adding 10 event listeners to individual HTML elements:
- Pros:
  - Each element is notified directly when an event occurs, potentially allowing for more precise handling of events.
  - No need to worry about which element received the event, as each listener knows its own context.
- Cons:
  - Requires 10 separate addEventListener calls, which can lead to slower performance due to overhead and potential conflicts between listeners.
Adding 1 global event listener to the window object for all 10 elements:
- Pros:
  - Simplifies the code by reducing the number of addEventListener calls required.
  - Can potentially lead to better performance due to reduced overhead and fewer conflicts between listeners.
- Cons:
  - The global event listener receives all events, not just those from specific elements. This might lead to unexpected behavior or unnecessary processing if not handled carefully.

Other considerations:

The benchmark does not account for differences in how the two approaches handle event propagation or capture order. In some cases, these factors can impact performance.
The test may be influenced by the browser's internal mechanics and specific implementation of addEventListener. Different browsers might exhibit different behavior or optimizations when dealing with event listeners.

Benchmark result:

The latest benchmark results show that the approach with 10 individual event listeners (adding 10 event listeners to individual HTML elements) performs better than the single global event listener approach. This suggests that, in this specific scenario, directly notifying each element of an event may lead to slightly faster performance compared to relying on a global event listener.

Keep in mind that these results might not be universally applicable and could vary depending on the specific use case, browser, or environment.

LLMs can make mistakes. Check important info.

Let's break down what is tested in the provided benchmark:

**Benchmark:** `event listener test: window vs element`

The benchmark compares the performance of two approaches:

1. **Adding 10 event listeners to individual HTML elements**: This involves creating 10 `input` elements and adding an event listener to each one using `addEventListener`. The event listener logs the `e` object (an event) to the console.
2. **Adding 1 global event listener to the `window` object for all 10 elements**: This involves creating a single function that will be called whenever any of the 10 elements receives an event, and then adding this function as an event listener to the `window` object using `addEventListener`. The event listener logs the `e` object (an event) to the console.

**Options being compared:**

* Adding multiple event listeners vs. a single global event listener
* Performance differences between these two approaches

**Pros and Cons of each approach:**

1. **Adding 10 event listeners to individual HTML elements**:
	* Pros:
		+ Each element is notified directly when an event occurs, potentially allowing for more precise handling of events.
		+ No need to worry about which element received the event, as each listener knows its own context.
	* Cons:
		+ Requires 10 separate `addEventListener` calls, which can lead to slower performance due to overhead and potential conflicts between listeners.
2. **Adding 1 global event listener to the `window` object for all 10 elements**:
	* Pros:
		+ Simplifies the code by reducing the number of `addEventListener` calls required.
		+ Can potentially lead to better performance due to reduced overhead and fewer conflicts between listeners.
	* Cons:
		+ The global event listener receives all events, not just those from specific elements. This might lead to unexpected behavior or unnecessary processing if not handled carefully.

**Other considerations:**

* The benchmark does not account for differences in how the two approaches handle event propagation or capture order. In some cases, these factors can impact performance.
* The test may be influenced by the browser's internal mechanics and specific implementation of `addEventListener`. Different browsers might exhibit different behavior or optimizations when dealing with event listeners.

**Benchmark result:**

Keep in mind that these results might not be universally applicable and could vary depending on the specific use case, browser, or environment.

Related benchmarks:

event listener test: window vs element (version: 0)

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

Comparing performance of: 1 event listener on every input(10) vs 1 window event listener for every input(10)

Created: 2 years ago by: Guest

Jump to the latest result

1 event listener on every input(10)

1 window event listener for every input(10)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):