Run results for: cost of HTML element eventListeners

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser: Chrome 119

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

2 listeners

1K/s

10 listeners

114/s

50 listeners

21/s

100 listeners

10/s

200 listeners

4/s

View exact numbers

Test name	Executions per second
✓ 2 listeners	1,335 Ops/sec
10 listeners	114 Ops/sec
50 listeners	21 Ops/sec
100 listeners	10 Ops/sec
200 listeners	4 Ops/sec

Script Preparation code:

var audio = document.createElement("audio");

function andAOne(e){ 
  e.count = (e.count|| 0) +1; 
}

function andAOneAndAStop(e){ 
  e.count = (e.count|| 0) +1; 
  e.count === 501 && e.stopPropagationImmediately();
}

Tests:

2 listeners
for (var i = 0; i <2; i++) audio.addEventListener("ratechange",andAOne.bind({})); audio.playbackRate = 2;
10 listeners
for (var i = 0; i <10; i++) audio.addEventListener("ratechange",andAOne.bind({})); audio.playbackRate = 2;
50 listeners
for (var i = 0; i <50; i++) audio.addEventListener("ratechange",andAOne.bind({})); audio.playbackRate = 2;
100 listeners
for (var i = 0; i <100; i++) audio.addEventListener("ratechange",andAOne.bind({})); audio.playbackRate = 2;
200 listeners
for (var i = 0; i <200; i++) audio.addEventListener("ratechange",andAOne.bind({})); audio.playbackRate = 2;