Benchmark: event listeners window vs input via 10 inputs

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:

listener on every input
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('keypress',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
listener only on window
const onKeyDown = (e) => console.log({e}); window.addEventListener('keydown', onKeyDown, false); input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
listener on every input
listener only on window

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and discussed.

**Benchmark Overview**

The benchmark is designed to compare two approaches for handling keyboard events in a web application:

1. Adding event listeners to individual input elements (e.g., `input1`, `input2`, etc.).
2. Adding an event listener to the `window` object and dispatching keyboard events directly from it.

**Test Case 1: "listener on every input"**

This test case involves adding an event listener to each of the 10 input elements (`input1` to `input10`) using the `addEventListener` method. The listener function logs the incoming event object to the console when a key is pressed.

The test then simulates a focus event and a keyboard press event for each input element, followed by a dispatching of the same events directly from the window object (without assigning an event listener).

**Test Case 2: "listener only on window"**

This test case is similar to Test Case 1, but instead of adding event listeners to individual input elements, it adds an event listener to the `window` object using the `addEventListener` method. The listener function logs the incoming event object to the console when a key is pressed.

The test then simulates a focus event and a keyboard press event directly from the window object (without assigning an event listener).

**Comparison**

By comparing these two approaches, we can evaluate their performance characteristics:

* **Overhead of adding event listeners**: Test Case 1 shows that adding event listeners to individual elements incurs significant overhead compared to simply dispatching events directly from the `window` object.
* **Event listener attachment and detachment**: Both test cases demonstrate that attaching and detaching event listeners has a cost, but it's likely negligible in most scenarios.
* **Event handling performance**: Test Case 2 shows that handling events directly from the `window` object is faster than handling them through individual element event listeners.

**Library/Functionality Used**

None.

**Special JS Features or Syntax Used**

The benchmark uses standard JavaScript features, such as:

* `addEventListener`
* `dispatchEvent`
* `KeyboardEvent`
* Lambda functions

**Other Considerations**

When writing web applications, it's essential to consider the trade-offs between different approaches for handling keyboard events. While adding event listeners to individual elements provides more control over the event handling process, it can also introduce significant overhead.

In contrast, dispatching events directly from the `window` object is often a better approach when:

* You need to handle keyboard events globally.
* You have limited resources or performance constraints.
* You want to minimize the number of event listeners attached to individual elements.

However, this approach may compromise control over the event handling process and make it harder to debug issues.

**Alternatives**

Some alternatives to these approaches include:

* Using a library like jQuery's `on` method or EventSource API for more centralized event handling.
* Implementing your own custom event system using Web Workers or other technologies.
* Leveraging modern JavaScript features, such as reactive programming libraries (e.g., RxJS) for more efficient and composable event handling.

Related benchmarks:

event listeners window vs input via 10 inputs (version: 0)

Comparing performance of: listener on every input vs listener only on window

Created: 3 years ago by: Guest

Jump to the latest result

listener on every input

listener only on window

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):