Benchmark: Testing change event handlers

HTML Preparation code:

<form><input id="number" type="text"/><input id="cvc" type="text"/><input id="expire" type="text"/><button id="submit" type="submit" disabled>SUBMIT</button></form>

Script Preparation code:

const card = { number: false, cvc: false, expire: false };
let submit = document.getElementById('submit');
let number = document.getElementById('number');
let cvc = document.getElementById('cvc');
let expire = document.getElementById('expire');
const onChangeHandler = function(event) {
  const key = event.target.id;
  if(!event.empty) {
    card[key] = true;
    card.cvc ? event.target.addEventListener('change', onChangeHandler): undefined;
    card.expire ? event.target.addEventListener('change', onChangeHandler): undefined;
  }
  card[key] ? event.target.removeEventListener('change', onChangeHandler): undefined;
  if(card.number && card.cvc && card.expire) {
    submit.removeAttribute('disabled');
    number.removeEventListener('change', onChangeHandler);
    cvc.removeEventListener('change', onChangeHandler);
    expire.removeEventListener('change', onChangeHandler);
    submit.innerText = submit.disabled.toString();
  }
};

Tests:

a
number.addEventListener('change', this.onChangeHandler); //cvc.addEventListener('change', this.onChangeHandler); //expire.addEventListener('change', this.onChangeHandler); number.value = "4242 4242 4242 4242"; number.dispatchEvent(new Event('change')); cvc.value = "333"; cvc.dispatchEvent(new Event('change')); expire.value = "02/22"; expire.dispatchEvent(new Event('change'));
b
number.addEventListener('change', this.onChangeHandler); //cvc.addEventListener('change', this.onChangeHandler); //expire.addEventListener('change', this.onChangeHandler); number.value = "4242 4242 4242 4242"; number.dispatchEvent(new Event('change')); cvc.value = "333"; cvc.dispatchEvent(new Event('change')); expire.value = "02/22"; expire.dispatchEvent(new Event('change'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
a
b

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Browser/OS: Firefox 78 on Linux

View result in a separate tab

Test name	Executions per second
a	23254.3 Ops/sec
b	23316.7 Ops/sec

Testing change event handlers (version: 0)

Comparing performance of: a vs b

Created: 3 years ago by: Guest

Jump to the latest result

a

b

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A