Event listeners

Benchmark created on

Description

How does many event listeners effect performance

Preparation HTML

<div id="container"></div>

Setup

// grab your div element
let mainDiv = document.getElementById("container");

// add handlers
function addHandlers(count) {
    // Loop to create the specified number of <div> elements
    for (let i=0; i<count; i++) {
        mainDiv.addEventListener("click", () => {
            console.log("some event content here")
        });
    }
}

Test runner

Ready to run.

Testing in
TestOps/sec
Invoke 10 click handlers on ONE <div>
addHandlers(10);
//invoke click listener events
mainDiv.click();
ready
Invoke 100 click handlers on ONE <div>
addHandlers(100);
//invoke click listener events
mainDiv.click();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.