Qual è un buon esempio di utilizzo dei costruttori di eventi in js?

Question

sto cercando di capire come creare correttamente e gli eventi di incendio in JavaScript, così nel processo di apprendimento corse in questa pagina:

https://developer.mozilla.org/en-US/docs/DOM/document.createEvent

Quale in cima mi informa di quanto segue:

Il metodo createEvent è obsoleto. Utilizzare invece costruttori di eventi.

Googling I costruttori di eventi JS non sono stati molto fruttuosi - argomenti che parlano di costruttori in generale, ma non di ciò che sto cercando. Qualcuno potrebbe spiegarmi quali sono i costruttori degli eventi e fornire un buon esempio del loro utilizzo?

Answer 1

Da https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent:

Sembra che gli eventi sono ora incapsulati in una classe denominata CustomEvent. Puoi pensare al vecchio document.createEvent come metodo factory che restituisce un oggetto evento. Ora, invece di usare document.createEvent per creare l'oggetto, ora hai accesso per creare direttamente l'oggetto.

//this is the new way 
    var my_event = new CustomEvent('NewEventName'); 
    var my_element = document.getElementById('TargetElement'); 
    my_element.dispatchEvent(my_event); 

è la sostituzione per

//this is the old way 
    var my_event = document.createEvent('NewEventName'); 
    var my_element = document.getElementById('TargetElement'); 
    my_element.dispatchEvent(my_event); 

Answer 2

Si desidera utilizzare addEventListener()

https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

Ecco il mio codice della libreria per il collegamento di eventi, ho trovato questi su StackOverflow e metterli dentro la mia app namespace globale:

var app={} 

app.listenEvent=function(eventTarget, eventType, eventHandler) { 
    if (eventTarget.addEventListener) { 
     eventTarget.addEventListener(eventType, eventHandler,false); 
    } 
    else if (eventTarget.attachEvent) { 
     eventType = "on" + eventType; 
     eventTarget.attachEvent(eventType, eventHandler); 
    } 
    else { 
    eventTarget["on" + eventType] = eventHandler; 
    } 
} 


app.cancelEvent=function(event) { 
    if (event.preventDefault) 
     event.preventDefault() 
    else 
     event.returnValue = false; 
} 


app.cancelPropagation=function(event) { 
    if (event.stopPropagation) { 
     event.stopPropagation(); 
    } else { 
    event.cancelBubble = true; } 
} 

Quindi, per aggiungere un ascolto per un evento:

app.listenEvent(document.aform.afield, 'focus', function(){console.log(arguments)}) 

Queste funzioni sono eccezionali, funzionano su tutti i browser.