• Programmazione » Javascript » Tutorial Javascript

Pagina 1 di 2

Come tutti i principali modelli ad oggetti, anchel'Object Model di Dynamic HTML (DHTML) èessenzialmente caratterizzato da:

• Costanti, come tabella colori, HTTP Response Headers, tabella codici di una specifica lingua, ecc.
• Collezioni, come ad esempio childNodes (collection di elementi HTML e TextNode che discendono da uno specifico oggetto), attributes (l'elenco degli attributi di un oggetto), images (la collezioni di immagini contenute in un document), ecc.
• Oggetti, ovvero i singoli "mattoncini" che costituiscono il DOM di un documento, tipicamente inseriti tramite markup come body, img, form, ecc.
• Metodi, come alert per la visualizzazione di una finestra di dialogo applicativa, appendChild che consente di estendere la collection dei childNodes di un oggetto, createElement per istanziare un nuovo elemento per uno specifico tag, ecc.
• Proprietà , che consentono di specificare - tipicamente come attributi nel markup - caratteristiche specifiche di un oggetto come background, border, font, title, width, height, ecc.
• Eventi, ovvero la modalità con cui un oggetto notifica all'esterno che "è successo qualcosa" , come un cambiamento dello stato (come ad esempio load, error, ecc.) o l'azione di un utente o di un altro elemento del DOM (come ad esempio click, , focus, blur, ecc.)

In questo articolo ci soffermeremo in particolaresull'utilizzo degli eventi, analizzando i diversi metodidisponibili per intercettare gli eventi ed associarvi ilcodice JavaScript necessario al funzionamento diun'applicazione web-based.

Event handling

Esistono diverse modalità per intercettare un evento(event handling). Di seguito vengono proposte le principalisoluzioni disponibili:

Gestione degli eventi tramite markup

L'handling di un evento tramite markup èprobabilmente la modalità più diffusa:

<input type="button" value="Hello" onclick="alert('Hello World!');" />

Gestione degli eventi tramite codice JavaScript

Tramite JavaScript è possibile associare ad un eventodi uno specifico oggetto l'esecuzione di un particolarecodice:

<input type="button" value="Hello" id="btnHello1" /><script type="text/javascript">document.getElementById("btnHello1").onclick = function(){    alert("Hello World!");}</script>

In modo analogo possiamo associare ad un eventol'esecuzione di specifica funzione:

<input type="button" value="Hello" id="btnHello2" /><script type="text/javascript">document.getElementById("btnHello2").onclick = HelloWorld;function HelloWorld(){    alert("Hello World!");}</script>

Si noti l'assenza delle parentesi tondenell'associazione della funzione all'evento (functionpointer)

Continua>>>