Spesso può rivelarsi utile creare degli eventi personalizzati oltre a quelli esistenti. Il metodo più semplice funziona così:

var event = new CustomEvent('nomeEvento');
// Ascoltiamo su un elemento:
elem.addEventListener('nomeEvento', function(e){...});
// Trigger:
event.dispatchEvent(event);

Questo metodo funziona su tutti browser più moderni – tranne Internet Explorer. Per funzionare anche con browser antiquati e in IE, dobbiamo usare anche qualche metodo alternativo:

function creaEvento(eventType) {
    try {
        return new CustomEvent(eventType);
    } catch (error) { // CustomEvent non supportato
        if (document.createEvent && document.createEvent.initEvent) {
            // browser vecchi
            var ev = document.createEvent("HTMLEvents");
            ev.initEvent(eventType, true, true);
        } else if (document.createEventObject) {
            // IE
            var ev = document.createEventObject();
            ev.eventType = eventType;
        } else {
            return false;
        }

        return ev;
    }
}

A questo punto, però bisogna tenere a mente che gli eventi creati con createEventObject non hanno il metodo dispatchEvent, ma usano fireEvent.

function triggerEvento(element, event) {
    if (element.dispatchEvent) {
        element.dispatchEvent(event);
    } else if (element.fireEvent) {
        element.fireEvent("on" + event.eventType, event);
    } else {
        return false;
    }
    return true;
}

Possiamo così creare e usare i nostri eventi personalizzati!