Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
event delegation
(version: 0)
Comparing performance of:
one vs many vs parent bound
Created:
8 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="container"><div class="one"></div> <div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div>
Tests:
one
$('.one').on('click', function() {});
many
$('.many').on('click', function() {});
parent bound
$('#container').on('click', '.many', function() {});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
one
many
parent bound
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):
**Benchmark Overview** The provided benchmark, "event delegation", measures the performance of event handling in JavaScript. It consists of three test cases: 1. `one`: Attaches an event listener to a single element (`$('.one')`) and does nothing when triggered. 2. `many`: Attaches an event listener to multiple elements (`$('.many)`) and does nothing when triggered. 3. `parent bound`: Attaches an event listener to the parent element of multiple elements (`$('#container').on('click', '.many')`) and does nothing when triggered. **Options Compared** The benchmark compares three different approaches: 1. **Direct binding**: Each element is directly bound to an event listener (e.g., `$('.one').on('click', function() {})`). 2. **Event delegation**: An event listener is attached to a parent element, and the target element is specified as a CSS selector (e.g., `$('#container').on('click', '.many')`). **Pros and Cons** **Direct Binding** * Pros: + More intuitive and easy to understand for developers. + Does not require additional DOM traversal or manipulation. * Cons: + Can lead to slower performance due to the need to traverse the DOM tree for every event dispatch. + May result in memory leaks if event listeners are not properly cleaned up. **Event Delegation** * Pros: + Can significantly improve performance by reducing the number of DOM traversals required for event dispatch. + Allows for more efficient handling of events, as only relevant elements need to be checked. * Cons: + May require additional setup and configuration to ensure correct element selection. + Can lead to more complex code if not implemented correctly. **Benchmark Results** The latest benchmark results show that: 1. `one` performs the best with a high execution frequency (260627.796875 executions per second) due to its simple event handling logic. 2. `parent bound` performs the worst, but still outperforms direct binding by a significant margin (4362.38623046875 executions per second). 3. `many` falls in between, with a moderate execution frequency. **Conclusion** The benchmark highlights the benefits of event delegation over direct binding for event handling in JavaScript. By using event delegation, developers can significantly improve performance and reduce DOM traversals, leading to faster and more efficient code execution. However, proper setup and configuration are crucial to ensure correct element selection and optimal performance.
Related benchmarks:
event delegation
id event listener
jQuery event On Performance with event set on each item
test click jquery
Comments
Confirm delete:
Do you really want to delete benchmark?