MeasureThat.net

Run results for: Event Bubbling and Event Capturing

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Chrome 134
Windows
Desktop
one month ago
Test name Executions per second
Delegation 2138.0 Ops/sec
Targetting 350.9 Ops/sec
HTML Preparation code:
AخA
 
1
<!--your preparation HTML code goes here-->
Script Preparation code:
​x
 
const buttons = Array.from({length: 10000}, () => document.createElement('button'))
const events = new Map()
​
const addListener = (event, target, listener) => {
  let targets = events.get(event)
  if (targets === undefined) {
    targets = new Map()
    events.set(event, targets)
  }
​
  let listeners = targets.get(target)
  if (listeners === undefined) {
    listeners = new Set()
    targets.set(target, listeners)
  }
​
  listeners.add(listener)
}
Tests:

  • Delegation

     
    buttons.forEach((target) => {
      addListener('click', target, console.log)
      addListener('focus', target, console.log)
      addListener('blur', target, console.log)
    })

  • Targetting

     
    buttons.forEach((button) => {
      button.addEventListener('click', console.log)
      button.addEventListener('focus', console.log)
      button.addEventListener('blur', console.log)
    })