JavaScript/Gli eventi nel BOM: differenze tra le versioni

== Eventi come attributi HTML ==

Il modo più semplice di definire un evento è quello di inserirlo come '''attributo agli elementi HTML''' della pagina stessa. Ad esempio:

<img src="logo.png" width="100px" onclick="alert('hai fatto click sull\'immagine!')" alt="Clicca per saluti" />

Nell'esempio associamo il codice JavaScript che mostra l'alert al click dell'utente sull'immagine HTML.

 

Ovviamente possiamo anche fare riferimento a funzioni o variabili dichiarate precedentemente nel corso della pagina HTML:

<img src="logo.png" width="100px" onclick="salutaUtente()" alt="Clicca per saluti" />

Tramite questo sistema possiamo usufruire dell'oggetto <code>this</code> per riferirci all'elemento HTML a cui è stato applicato. Ad esempio:

<img src="logo.png" width="100px" onmouseover="this.src='logo2.png'" onmouseout="this.scr='logo.png'" alt="rollover" />

Con questa riga di HTML e qualche istruzione JavaScript creiamo quello che si chiama un ''rollover'', cioè l'effetto di cambiamento dell'immagine quando il mouse passa sopra di essa.

{{Vedi anche|JavaScript/Oggetto document}}

== Eventi come proprietà ==

Gli eventi possono essere anche impostati '''tramite il BOM''', cioè tramite JavaScript. Ad esempio:

window.onload = "alert('pagina in caricamento...');";

Questo può risultare comodo per aggiungere eventi quando non si possono modificare direttamente gli oggetto HTML, ad esempio nel caso di script esterni creati per essere utilizzati più volte.

 

Attenzione a non incappare in questo tipo di errori:

function saluta () {

alert("pagina in caricamento");

};

window.onload = saluta(); //non funziona

In questo codice l'intenzione è quella di mostrare un avviso al caricamento della pagina; scrivendo <code>saluta()</code>, però, il browser lo valuta come funzione; nel nostro caso, poiché tale funzione non restituisce alcun valore, al caricamento della pagina non succederà nulla. Per ottenere il risultato desiderato è necessario utilizzare la sintassi:

window.onload = saluta; //ora funziona

In questo modo facciamo riferimento non al risultato della funzione bensì al suo codice vero e proprio.

 

Un altro metodo consiste nell'assegnare alla funzione un '''oggetto <code>function</code>''' creato sul momento:

window.onload = function () {

alert("pagina in caricamento");

};

 

== Restituire dei valori ==

Quando si collega del codice ad un evento, è possibile impostare un '''valore di ritorno''': se questo è <code>false</code>, verrà annullata l''''azione predefinita''':

<a href="pagina.htm" onclick="return confirm('vuoi veramente seguire il link?');">cliccami!</a>

Cliccando sul link verrà mostrato un messaggio di conferma; se si clicca il pulsante ''annulla'' la funzione restituirà false e di conseguenza restituirà false il codice collegato all'evento; in questo modo si elimina l'azione predefinita per l'evento click su un link, cioè non verrà caricata la pagina.