Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
addEventListener() vs jQuery.on() with click
(version: 0)
Comparing performance of:
addEventListener vs addEventListener anon vs jQuery.on() vs jQuery.on() anon
Created:
2 years ago
by:
Guest
Jump to the latest result
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>
Run tests (4)
Previous results
Fork
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:
6 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
Embed
Embed Benchmark Result
Test name
Executions per second
addEventListener
283.7 Ops/sec
addEventListener anon
107.3 Ops/sec
jQuery.on()
21520.7 Ops/sec
jQuery.on() anon
13390.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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.
Related benchmarks:
AddEventListener
AddEventListener
addEventListener vs jQuery
addEventListener() vs jQuery.on() with mouseEnter
Comments
Confirm delete:
Do you really want to delete benchmark?