Event listeners (v2)

Revision 2 of this 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 1 click handlers on ONE <div>
addHandlers(1);
//invoke click listener events
mainDiv.click();
ready
Invoke 2 click handlers on ONE <div>
addHandlers(2);
//invoke click listener events
mainDiv.click();
ready
Invoke 3 click handlers on ONE <div>
addHandlers(3);
//invoke click listener events
mainDiv.click();
ready
Invoke 4 click handlers on ONE <div>
addHandlers(4);
//invoke click listener events
mainDiv.click();
ready
Invoke 5 click handlers on ONE <div>
addHandlers(5);
//invoke click listener events
mainDiv.click();
ready
Invoke 10 click handlers on ONE <div>
addHandlers(10);
//invoke click listener events
mainDiv.click();
ready
Invoke 15 click handlers on ONE <div>
addHandlers(15);
//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.