Benchmark: Testing change event handlers v2

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>
<div id="msg"></div>

Script Preparation code:

const card = { number: false, cvc: false, expire: false };
let msg = document.getElementById('msg');
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');
    submit.innerText = submit.disabled.toString();
  }
};
number.addEventListener('change', this.onChangeHandler);
function _isEvent(prop) {
    if (0 !== prop.indexOf('on')) {
        return false;
    }

    return true;
}

function _getEvents(obj) {
    var result = [];

    for (var prop in obj) {
        if (_isEvent(prop)) {
            prop = prop.substr(2); // remove "on" at the beginning
            result.push(prop);
        }
    }

    return result;
}

function getEvents() {
    const result = {};

    result['window'] = _getEvents(window, hasOwnProperty);
    
    const arr = Object.getOwnPropertyNames(window);
    
    for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        
        let resultArray = [];

        try {
            const obj = window[element];

            if (!obj || !obj['prototype']) {
                continue;
            }

            proto = obj['prototype'];

            resultArray = _getEvents(proto);

        } catch (err) {
            // console.error(`failed to get events of %o`, element);
        }

        result[element] = resultArray;
    }

    return result;
}
msg.innerText = getEvents();

Tests:

a
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.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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks:

Testing change event handlers v2 (version: 0)

Comparing performance of: a vs b

Created: 5 years ago by: Guest

Jump to the latest result

a

b

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results