Event Delegation Perf Testing

Benchmark created on July 14, 2023

Preparation HTML

<div id="root"></div>

Setup

let list = [...Array(1000).keys()];
        function withoutDelegation() {
            list.forEach(item => {
                let div = document.createElement('div');
                div.innerHTML = item;
                div.classList.add('item');
                div.addEventListener('click', (e) => {
                    alert(e.target.innerHTML);
                });
                document.getElementById('root').appendChild(div);
            });
        }

        function withDelegation() {
            list.forEach(item => {
                let div = document.createElement('div');
                div.innerHTML = item;
                div.classList.add('item');
                document.getElementById('root').appendChild(div);
            });

            document.getElementById('root').addEventListener('click', (e) => {
                if (e.target.classList.contains('item')) {
                    alert(e.target.innerHTML);
                }
            });
        }

Test runner

withoutDelegation()

withDelegation()

Revisions

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

• Revision 1: published on July 14, 2023