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

Test name	Executions per second
2 listeners	1335.5 Ops/sec
10 listeners	113.7 Ops/sec
50 listeners	21.4 Ops/sec
100 listeners	9.9 Ops/sec
200 listeners	3.9 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;

Run results for: cost of HTML element eventListeners

2 listeners

10 listeners

50 listeners

100 listeners

200 listeners