Benchmark: addEventListener() vs jQuery.on() with mouseEnter

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 = '';
});

Tests:

addEventListener
const f = () => { return 123; }; document.querySelectorAll('div').forEach((e) => { e.addEventListener('mouseenter', f); });
addEventListener anon
document.querySelectorAll('div').forEach((e) => { e.addEventListener('mouseenter', () => { return 123; }); });
jQuery.on()
const f = () => { return 123; }; document.querySelectorAll('div').forEach((e) => { jQuery(e).on('mouseenter', f); });
jQuery.on() anon
document.querySelectorAll('div').forEach((e) => { jQuery(e).on('mouseenter', () => { 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

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark compares three ways to attach an event listener to an HTML element in JavaScript:

1. `addEventListener()`
2. `jQuery.on()` (using jQuery library)
3. `addEventListener` with anonymous function (`addEventListener anon`)

These methods are compared for their performance on different browsers, devices, and platforms.

**Options Compared**

The three options are compared based on the following factors:

* **Attachment speed**: How quickly can the event listener be attached to the element?
* **Event invocation frequency**: How often is the event invoked (i.e., how many times does it trigger)?

**Pros and Cons of Each Approach**

1. `addEventListener()`:
	* Pros: Native JavaScript method, easy to use, flexible.
	* Cons: May have performance overhead due to browser optimizations.
2. `jQuery.on()`:
	* Pros: Efficient attachment mechanism, widely used in web development.
	* Cons: Requires jQuery library inclusion, may have additional dependencies.
3. `addEventListener anon` (anonymous function):
	* Pros: Simplifies event invocation, avoids potential name collisions.
	* Cons: May lead to performance overhead due to function creation.

**Library and Syntax Considerations**

The benchmark uses the jQuery library, which is a popular JavaScript framework for DOM manipulation and event handling. The `jQuery.on()` method is an alias for `addEventListener` when using jQuery.

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

In addition to the three options compared, other ways to attach an event listener to an HTML element include:

* Using a framework like React or Angular
* Utilizing the `DOMEvent` API (e.g., `DOMContentLoaded`, `load`)
* Implementing a custom event handling mechanism using Web Workers or WebAssembly

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the options tested in this benchmark.

In summary, the MeasureThat.net benchmark provides a simple yet informative comparison of three methods for attaching an event listener to an HTML element in JavaScript. The results can help developers choose the most efficient approach for their specific use case.

Latest run results:

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

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

Browser/OS: Firefox 124 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
addEventListener	522.4 Ops/sec
addEventListener anon	139.1 Ops/sec
jQuery.on()	26408.5 Ops/sec
jQuery.on() anon	12852.1 Ops/sec

Related benchmarks:

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

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

Created: 2 years ago by: Registered User

Jump to the latest result

addEventListener

addEventListener anon

jQuery.on()

jQuery.on() anon

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):