[Javascript] Documentazione sugli eventi nei browser

[Axel.vv]

Ciao a tutti,
Ammetto di non essere un gran programmatore, ma me la sono sempre cavata con piccole applicazioni nei linguaggi più comuni. Ora però mi sto perdendo in un bicchiere d'acqua con gli eventi in Javascript. Non tanto se si tratta di eseguire una funzione a seguito di un evento, quanto piuttosto padroneggiare eventi legati alle operazioni asincrone, come la lettura di un file, Ajax, web workers etc.
C'è sempre un oggetto "e" o "ev", negli esempi, ma non capisco a fondo il meccanismo che genera tale oggetto. Così mi trovo a rimaneggiare codice scovato su internet, senza sapere esattamente come funzioni, e la cosa non mi fa impazzire.
Qualcuno saprebbe indicarmi dove trovare della documentazione esaustiva sull'argomento? Inglese o italiano è indifferente, solo, vorrei si trattasse di Javascript puro, no JQuery o altre librerie.
Grazie mille!

[wingman87]

Ti consiglio Mdn: https://developer.mozilla.org/en-US/docs/Web/API/Event

In genere in fondo ad ogni pagina c'è anche un riferimento alle specifiche (che consulto di rado perché in genere le informazioni su Mdn sono più che sufficienti)

Inviato dal mio F5121 utilizzando Tapatalk

[Axel.vv]

Ti consiglio Mdn: https://developer.mozilla.org/en-US/docs/Web/API/Event


Grazie mille wingman87, solitamente bazzico più w3schools, ma conosco anche MDN. Purtroppo non ho mai trovato l'informazione che cerco, che può essere riassunta in questi due esempi di codice:


w = new Worker("demo_workers.js");
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

e

var reader = new FileReader();
reader.onload = function(event) {
var testo = event.target.result;
document.getElementById("contenuto").innerHTML = testo;
};
reader.readAsText(file);


Non capisco il pattern oggetto.evento = funzione (event) {...}
In particolare "event", da dove arriva? chi lo inizializza?

Sono certo sia una stupidata, ma proprio non ci arrivo :muro:.
Grazie!!

[wingman87]

Grazie mille wingman87, solitamente bazzico più w3schools, ma conosco anche MDN. Purtroppo non ho mai trovato l'informazione che cerco
...
...
Non capisco il pattern oggetto.evento = funzione (event) {...}
In particolare "event", da dove arriva? chi lo inizializza?


Il pattern è legato all'event loop
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Sostanzialmente se i dati che ti servono non sono immediatamente disponibili, come succede quando devi attendere un certo messaggio o devi leggere un file, allora si registra un handler per l'evento per non bloccare l'applicazione. E' un'operazione asincrona. L'handler è una funzione che prende un certo numero di parametri e il numero e il tipo dei parametri è dipendente dalle specifiche dell'evento. I parametri in alcuni casi ti verranno passati direttamente dal browser, altre volte da altri script.

Riguardo agli esempi che hai riportato:
w = new Worker("demo_workers.js");
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

Se guardi la documentazione di Worker.onmessage
https://developer.mozilla.org/en-US/docs/Web/API/Worker/onmessage
dice che è un event handler per eventi di tipo MessageEvent
https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent
che tra le varie proprietà ha anche "data"

var reader = new FileReader();
reader.onload = function(event) {
var testo = event.target.result;
document.getElementById("contenuto").innerHTML = testo;
};
reader.readAsText(file);
FileReader è un po' più complicato.
Nella pagina di FileReader.onload
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
dice che onload è l'handler che viene eseguito quando viene sollevato l'evento load
https://developer.mozilla.org/en-US/docs/Web/Events/load
come vedi quest'evento ha la proprietà target che punta a un EventTarget. FileReader implementa EventTarget (lo vedi nella colonna di sinistra della pagina di FileReader), quindi con event.target stai puntando al FileReader e con event.target.result stai leggendo la proprietà result del FileReader
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result

[Axel.vv]

Grazie mille, Davvero!
Il tassello che mi mancava era l'Event Loop.
Ora è tutto molto più chiaro!