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]);