Benchmark: addEventListener vs jQuery .click and .on

addEventListener vs jQuery .click and .on (version: 0)

addEventListener vs addEventListener anon vs $().click vs $().click anon vs onclick vs onclick anon vs $().on('click') vs $().on('click') anon Based on: https://measurethat.net/Benchmarks/Show/6526/0/addeventlistener-vs-jquery

Comparing performance of: addEventListener vs addEventListener anon vs $().click vs $().click anon vs onclick vs onclick anon vs $().on('click') vs $().on('click') anon

Created: 2 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div><div>Test</div>

Script Preparation code:

var divs = document.getElementsByTagName('div');
for (let d of divs) {
    $(d).unbind().prop("onclick", null);
}

Tests:

addEventListener
const f = () => console.log('hi'); for (let d of divs) { d.addEventListener('click', f); }
addEventListener anon
for (let d of divs) { d.addEventListener('click', () => console.log('hi')); }
$().click
const f = () => console.log('hi'); for (let d of divs) { $(d).click(f); }
$().click anon
for (let d of divs) { $(d).click(() => console.log('hi')); }
onclick
const f = () => console.log('hi'); for (let d of divs) { d.onclick = f; }
onclick anon
for (let d of divs) { d.onclick = () => console.log('hi'); }
$().on('click')
const f = () => console.log('hi'); for (let d of divs) { $(d).on('click', f); }
$().on('click') anon
for (let d of divs) { $(d).on('click', () => console.log('hi')); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
addEventListener
addEventListener anon
$().click
$().click anon
onclick
onclick anon
$().on('click')
$().on('click') anon

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

addEventListener vs jQuery .click and .on (version: 0)

addEventListener vs addEventListener anon vs $().click vs $().click anon vs onclick vs onclick anon vs $().on('click') vs $().on('click') anon Based on: https://measurethat.net/Benchmarks/Show/6526/0/addeventlistener-vs-jquery

Comparing performance of: addEventListener vs addEventListener anon vs $().click vs $().click anon vs onclick vs onclick anon vs $().on('click') vs $().on('click') anon

Created: 2 years ago by: Guest

Jump to the latest result

addEventListener

addEventListener anon

$().click

$().click anon

onclick

onclick anon

$().on('click')

$().on('click') anon

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results