Benchmark: EventListener in parent vs EventListener in childs

HTML Preparation code:

<div id="parent">
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div> 
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div> 
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
</div>

AخA
 
<div id="parent">
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div> 
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div> 
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
    <div>a</div> <div>b</div> <div>c</div> <div>e</div> <div>f</div> <div>g</div> <div>h</div> <div>i</div> <div>j</div> <div>k</div>
</div>

Script Preparation code:

var parent = document.getElementById("parent");
var text ="";

 
var parent = document.getElementById("parent");var text ="";

Tests:

Parent listener
parent.addEventListener("click", (e)=>{ text = e.target.textContent; });
parent.addEventListener("click", (e)=>{
text = e.target.textContent;
});

Child listeners

for(var children of parent.children){
    children.addEventListener("click",(e)=>{
        text = e.target.textContent;    
    })
}

 
for(var children of parent.children){    children.addEventListener("click",(e)=>{        text = e.target.textContent;        })}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Parent listener
Child listeners

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/109.0

Browser/OS: Firefox 109 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Parent listener	2401.5 Ops/sec
Child listeners	45.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's break down the benchmark and its various components.

Benchmark Definition

The benchmark is comparing two approaches to attach event listeners:

Parent listener: Attaching an event listener directly to the parent element using addEventListener.
Child listeners: Attaching event listeners to each child element individually using a for loop and addEventListener.

Options being compared

In this case, we're only comparing two options.

Parent listener
Child listeners

Pros and Cons of each approach

Parent listener
- Pros:
  - Simpler code structure
  - Less overhead since only one event listener is attached to the parent element
- Cons:
  - May lead to a slower response time if the child elements are not directly accessible (e.g., due to CSS layout or animation)
Child listeners
- Pros:
  - Can handle cases where child elements need to be accessed separately (e.g., for animations or transformations)
- Cons:
  - More complex code structure
  - Higher overhead since multiple event listeners are attached to each child element

Library

There is no explicit library mentioned in the benchmark definition. However, it's likely that the addEventListener method is used, which is a part of the HTML5 specification and is supported by most modern browsers.

Special JS feature/syntax

None are explicitly mentioned in this benchmark. The code uses standard JavaScript syntax, including addEventListener, forEach, and template literals.

Other alternatives

If we were to consider alternative approaches:

Using event delegation: Instead of attaching separate event listeners to each child element, we could use event delegation by attaching a single event listener to the parent element and then using the event.target property to determine which child element was clicked.
Using a library or framework: Depending on the specific requirements of the project, a library like jQuery or a framework like React might provide optimized solutions for handling events in complex DOM structures.

The current benchmark provides a simple and straightforward comparison between two approaches. Adding additional alternatives would require more complexity and potentially introduce new variables that could affect the outcome of the benchmark.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**

The benchmark is comparing two approaches to attach event listeners:

1. **Parent listener**: Attaching an event listener directly to the parent element using `addEventListener`.
2. **Child listeners**: Attaching event listeners to each child element individually using a `for` loop and `addEventListener`.

**Options being compared**

In this case, we're only comparing two options.

* Parent listener
* Child listeners

**Pros and Cons of each approach**

1. **Parent listener**
	* Pros:
		+ Simpler code structure
		+ Less overhead since only one event listener is attached to the parent element
	* Cons:
		+ May lead to a slower response time if the child elements are not directly accessible (e.g., due to CSS layout or animation)
2. **Child listeners**
	* Pros:
		+ Can handle cases where child elements need to be accessed separately (e.g., for animations or transformations)
	* Cons:
		+ More complex code structure
		+ Higher overhead since multiple event listeners are attached to each child element

**Library**

There is no explicit library mentioned in the benchmark definition. However, it's likely that the `addEventListener` method is used, which is a part of the HTML5 specification and is supported by most modern browsers.

**Special JS feature/syntax**

None are explicitly mentioned in this benchmark. The code uses standard JavaScript syntax, including `addEventListener`, `forEach`, and template literals.

**Other alternatives**

If we were to consider alternative approaches:

* **Using event delegation**: Instead of attaching separate event listeners to each child element, we could use event delegation by attaching a single event listener to the parent element and then using the `event.target` property to determine which child element was clicked.
* **Using a library or framework**: Depending on the specific requirements of the project, a library like jQuery or a framework like React might provide optimized solutions for handling events in complex DOM structures.

Related benchmarks:

EventListener in parent vs EventListener in childs (version: 0)

Comparing performance of: Parent listener vs Child listeners

Created: 3 years ago by: Guest

Jump to the latest result

Parent listener