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

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Ubuntu

View result in a separate tab

jQuery.on()

22K/s

jQuery.on() anon

13K/s

addEventListener

284/s

addEventListener anon

107/s

View exact numbers

Test name	Executions per second
✓ jQuery.on()	21,521 Ops/sec
jQuery.on() anon	13,390 Ops/sec
addEventListener	284 Ops/sec
addEventListener anon	107 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

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

Created: 3 years ago by: Guest

Go to the latest result

addEventListener

addEventListener anon

jQuery.on()

jQuery.on() anon

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 3 years ago by: Guest

Go to the latest result

addEventListener

addEventListener anon

jQuery.on()

jQuery.on() anon

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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