Benchmark: Event Js - MeasureThat.net

HTML Preparation code:

<div id="test"></div>

Tests:

onclick
let el = document.querySelector("#test"); el.onclick = () => { console.log('click'); }
addEventListener
let el = document.querySelector("#test"); el.addEventListener('click', () => { console.log('click'); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
onclick
addEventListener

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
onclick	5334686.0 Ops/sec
addEventListener	2297.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The provided JSON represents two test cases for JavaScript microbenchmarks on MeasureThat.net. The tests focus on comparing the performance of two approaches to attach an event listener to an HTML element: using the `onclick` property directly versus using the `addEventListener` method.

**Options compared**

Two options are compared:

1. **Direct assignment**: Using the `onclick` property and assigning a function to it, like this: `let el = document.querySelector("#test"); el.onclick = () => { console.log('click'); };`
2. **Event listener addition**: Using the `addEventListener` method to attach an event listener to the element, like this: `let el = document.querySelector("#test"); el.addEventListener('click', () => { console.log('click'); });`

**Pros and cons of each approach**

1. **Direct assignment**:
	* Pros: Simple and straightforward.
	* Cons: May not be as efficient or flexible, as it uses a hardcoded property name (`onclick`) which might lead to naming conflicts if multiple listeners are added.
2. **Event listener addition**:
	* Pros: More flexible and efficient, as it allows for dynamic event listener attachment, removal, and updating. It also avoids potential naming conflicts.
	* Cons: Requires more code and might be perceived as less intuitive.

**Library usage**

Neither of the test cases uses any external libraries.

**Special JS features or syntax**

None are explicitly mentioned in the benchmark definition or individual test cases.

**Other alternatives**

If you want to compare performance of other event listener attachment methods, such as using a `addEventListener` with multiple event types, or using an event delegation approach (e.g., adding a single listener to a parent element and bubbling up events), these variations could be interesting additions to the benchmark.

In summary, this benchmark is designed to compare the performance of two common approaches to attaching event listeners in JavaScript: direct assignment using the `onclick` property versus addition using the `addEventListener` method. The results can help users understand the relative efficiency and flexibility of each approach.

Related benchmarks:

Event Js (version: 0)

Comparing performance of: onclick vs addEventListener

Created: 3 years ago by: Guest

Jump to the latest result

onclick

addEventListener

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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