JavaScript: associare eventi multipli agli elementi

In questo articolo vedremo come associare eventi multipli agli elementi con JavaScript.

Si tratta di creare una funzione che associ gli eventi ad un elemento usando tre array: uno per il tipo di eventi, uno per i gestori degli eventi e uno per controllare la risalita dell'evento corrente. Possiamo implementare la seguente soluzione.

'use strict';

const addEventListeners = (element = null, types = [], listener = [], useCapture = []) => {
    if(element === null || !element) {
        return false;
    }
    if(types.length === 0 || listener.length === 0 || useCapture.length === 0) {
        return false;
    }
    const length = types.length;
    if(listener.length !== length || useCapture.length !== length) {
        return false;
    }
    types.forEach((type, index) => {
        let evtListener = listener[index];
        let capture = useCapture[index];
        if(typeof evtListener === 'function' && typeof capture === 'boolean') {
            element.addEventListener(type, evtListener, capture);
        }       
    });
};

Esempio d'uso:

const inputEl = document.getElementById('email');

const onFocus = function() {
    inputEl.classList.add('focused');
};
const onBlur = function() {
    inputEl.classList.remove('focused');
};

addEventListeners(inputEl, ['focus', 'blur'], [onFocus, onBlur], [false, false]);