Benchmark: addEventListener() vs jQuery.on() with click

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Script Preparation code:

document.querySelectorAll('div').forEach((e) => {
    e.onmouseenter = '';
});
var divs = document.querySelectorAll('div');

Tests:

addEventListener
const f = () => { return 123; }; divs.forEach((e) => { e.addEventListener('click', f); });
addEventListener anon
divs.forEach((e) => { e.addEventListener('click', () => { return 123; }); });
jQuery.on()
const f = () => { return 123; }; document.querySelectorAll('div').forEach((e) => { jQuery(e).on('click', f); });
jQuery.on() anon
document.querySelectorAll('div').forEach((e) => { jQuery(e).on('click', () => { return 123; }); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
addEventListener
addEventListener anon
jQuery.on()
jQuery.on() anon

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of three approaches to attach an event listener to HTML elements: `addEventListener()` with and without anonymous functions, and `jQuery.on()` with and without anonymous functions.

**Test Cases**

There are four test cases:

1. **`addEventListener`**: Attaches a named function as an event listener.
2. **`addEventListener anon`**: Attaches an anonymous function as an event listener (equivalent to passing a callback function).
3. **`jQuery.on()`**: Attaches an event listener using jQuery's `on()` method with a named function.
4. **`jQuery.on() anon`**: Attaches an event listener using jQuery's `on()` method with an anonymous function.

**Comparison**

The benchmark measures the number of executions per second for each test case. The results show that:

* **`addEventListener anon`** outperforms all other approaches, suggesting that attaching anonymous functions is more efficient.
* **`jQuery.on()` anon`** performs similarly to **`addEventListener anon`**, implying that passing an anonymous function to `on()` has a similar performance profile to attaching a named function with `addEventListener`.
* **`jQuery.on()`** and **`addEventListener`** have different performance profiles, suggesting that the jQuery approach may be slower due to additional overhead.

**Pros and Cons**

1. **`addEventListener anon`**:
	* Pros: Simple, efficient, and widely supported.
	* Cons: May not provide clear error handling or debugging information.
2. **`jQuery.on()` anon**:
	* Pros: Similar performance to `addEventListener anon`, with additional features like event delegation.
	* Cons: Requires jQuery library, which may introduce additional overhead.
3. **`jQuery.on()`**:
	* Pros: Provides a convenient and feature-rich API for handling events.
	* Cons: May introduce additional overhead due to the jQuery library.

**Library Usage**

The `jQuery` library is used in tests 3 and 4, providing a convenient way to attach event listeners with minimal code. However, this also introduces an additional dependency that may affect performance.

**Special JS Features/Syntax**

None of the test cases use any special JavaScript features or syntax that would require additional explanation.

**Alternatives**

If you need alternative approaches for attaching event listeners, consider:

1. **`addEventListener`**: A lightweight and widely supported approach.
2. **Event delegation**: Use a common ancestor element to attach multiple event listeners to a single function.
3. **Libraries like React or Vue.js**: Provide built-in event handling mechanisms that can simplify your code.

Keep in mind that the choice of approach ultimately depends on your specific use case, performance requirements, and personal preference.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 YaBrowser/23.5.1.714 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 23 on Windows

View result in a separate tab

Test name	Executions per second
addEventListener	107.1 Ops/sec
addEventListener anon	51.0 Ops/sec
jQuery.on()	8007.4 Ops/sec
jQuery.on() anon	8318.4 Ops/sec

Related benchmarks:

addEventListener() vs jQuery.on() with click (version: 0)

Comparing performance of: addEventListener vs addEventListener anon vs jQuery.on() vs jQuery.on() anon

Created: one year ago by: Guest

Jump to the latest result

addEventListener

addEventListener anon

jQuery.on()

jQuery.on() anon

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):