Event Delegation Perf Testing

Benchmark created on


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

Ready to run.

Testing in
TestOps/sec
without delegation
withoutDelegation()
ready
with delegation
withDelegation()
ready

Revisions

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