la gestione degli eventi per Netscape Navigator

Argomenti trattati: l'oggetto event e Netscape Navigator

L'implementazione di Netscape Navigator per la gestione degli eventi è differente da quella di Internet Explorer, in particolare per le vecchie versioni del browser è disponibile un numero minore di eventi per un numero inferiore di oggetti. Ripetiamo che il sito si basa principalmente sugli eventi gestiti da Internet Explorer e che comunque cita e usa solo gli eventi maggiormente utilizzati, quindi vi potrebbero essere degli eventi di specifico interesse dell'utente non trattati in questo ambito.

Riferendoci a JavaScript 1.2 (nelle versioni inferiori quanto detto potrebbe non funzionare), mostriamo un elenco per descrivere i principali eventi supportati*:

Evento Elementi che lo supportano Si verifica quando... Gestore

Abort

immagini

L'utente interrompe il caricamento di un'immagine

onAbort

Blur

la finestra e gli elementi dei form 

L'utente toglie il fuoco da un elemento o dalla finestra

onBlur

Change

campi di testo, text areas, liste di selezione

L'utente modifica il valore di un elemento

onChange

Click

bottoni, radio buttons, checkboxes, pulsanti di submit, pulsanti di reset, collegamenti

L'utente clicca su un elemento

onClick

Error

immagini e finestre

Si verifica in caso di errore del caricamento di un'immagine o del documento HTML

onError

Focus

la finestra e gli elementi dei form 

L'utente sposta il fuoco su un elemento o sulla finestra

onFocus

KeyDown

il documento HTML, immagini, collegamenti, text areas

L'utente preme un tasto

onKeyDown

KeyPress

il documento HTML, immagini, collegamenti, text areas

L'utente preme un tasto carattere

onKeyPress

KeyUp

il documento HTML, immagini, collegamenti, text areas

L'utente rilascia un tasto

onKeyUp

Load

il corpo del documento

Viene caricata la pagina nel browser

onLoad

MouseMove

può essere gestito con la proprietà captureEvents

L'utente sposta il puntatore del mouse

onMouseMove

MouseDown

il documento HTML, bottoni, collegamenti

L'utente preme un tasto del mouse

onMouseDown

MouseOut

suddivisioni di una mappa, collegamenti

L'utente fa uscire il cirsore da un lemento (l'area di una mappa o un link)

onMouseOut

MouseOver

collegamenti

L'utente sposta il cursore su un link

onMouseOver

MouseUp

il documento HTML, bottoni, collegamenti

L'utente rilascia un pulsante del mouse

onMouseUp

Move

la finestra

Viene spostata la finestra

onMove

Reset

il form

Viene resettato un form

onReset

Resize

la finestra

Viene ridimensionata una finestra

onResize

Select

campi e aree di testo

L'utente seleziona un elemento

onSelect

Submit

il form

L'utente invia un form

onSubmit

Unload

il corpo del documento

L'utente esce da una pagina

onUnload

Va notato che l'evento può essere provocato anche da uno script.

Per richiamare un evento, generalmente si inserisce una chiamata a JavaScript nel gestore rispettivo.

Ad esempio, rispetto all'event handler onchange:

Modifica il valore della casella di testo:

 Il codice, semplicissimo, è il seguente:

<input type="text" name="tesempio" size="20" onchange="alert('il valore della casella di testo è:\n' + this.value)">

Nelle specifiche Netscape la costruzione dell'event handler rispetto all'evento è l'aggiunta del prefisso "on" e del nome maiuscolo dell'evento, ad esempio:

evento click=gestore onClick

ma nelle versioni recenti viene generalmente accettato anche se scritto in minuscolo, nel caso dell'esempio precedente onclick.

Un gestore di evento può richiamare anche una funzione, ad esempio: 

[...]
<script>
   function mia_funzione(parametro){
        alert(parametro);
   }
</script>
[...]
<input type="text" name="tesempio" size="20" onchange="mia_funzione('mio_parametro')">

Si possono assegnare diversi metodi e funzioni a ciascun gestore, separandoli tramite il ";", ad esempio:

<input type="text" name="tesempio" size="20" onchange="alert(this.value);mia_funzione('mio_parametro')">

Vi sono ulteriori modi per richiamare un metodo associato ad un gestore di eventi, tra cui:

nome_oggetto.nome_gestore=nome_funzione 

Es.: document.nome_form.nome_campo_testo.onchange=nome_funzione;

In questo caso occorre rispettare 2 regole:

  1. la funzione, essendo richiamata nominalmente, va esplicitata col solo nome senza parentesi finali;
  2. il gestore di evento deve essere scritto in minuscolo.

Un concetto non presente in Explorer è quello che la guida a JavaScript degli sviluppatori Netscape definiscono event capturing, ovvero la cattura degli eventi. Questa riguarda i seguenti oggetti del DOM:

I metodi messi a disposizione del programmatore sono:

Per permettere alla finestra di catturare tutti gli eventi di un certo tipo, deve essere utilizzata la seguente sintassi:

window.captureEvents(Event.NOME_EVENTO1[ | Event.NOME_EVENTO2[| Event.NOME_EVENTO3|[...]]]]])

Ad esempio:

window.captureEvents(Event.CLICK | Event.MOUSEMOVE)

che permette di catturare gli eventi gestiti da onClick e da onMouseMove.

Per rendere gestibile l'evento da tutta la finestra, si scrive la funzione di gestione dell'evento:

function miaFunzione( evento ) {
   // codice della funzione
   return false;
}

Questa funzione ci permette di gestire completamente l'evento, che viene passato come parametro, (evento corrisponde all'oggetto event) e permette di restituire true o false, per confermare o bloccare l'azione scaturita dall'evento.

Gestire il valore di ritorno può essere alquanto importante, ad esempio si può bloccare l'accesso ad un link o disabilitare il tasto destro del mouse.
Proprio a questo scopo viene messo a disposizione il metodo oggetto.routeEvent(e), richiamato dall'oggetto che riceve un evento per passare il valore di ritorno agli elementi che lo catturano successivamente.

Per completare il codice è necessario poi registrare la cattura dell'evento, ad esempio:

window.onclick=miaFunzione;

un esempio

Per completare questa panoramica sulla gestione degli eventi è necessario descrivere i metodo e le proprietà dell'oggetto Event, che è sotteso ad ogni evento richiamato dal gestore appropriato. L'oggetto non può essere creato dal programmatore, quindi sarebbe scorretto scrivere:

myevent_obj=new Event(); //sbagliato!!!

poiché viene creato automaticamente dal browser non appena un evento si verifica.

Di seguito, la descrizione:

 

Proprietà
height

Rappresenta la proprietà height della finestra o del frame.

layerX

Rappresenta la posizione orizzontale in pixel del puntatore del mouse relativamente al layer in cui si verifica l'evento.
Nel caso di un evento di resize della finestra corrisponde alla proprietà width della stessa. Il valore è numerico.

layerY

Rappresenta la posizione verticale in pixel del puntatore del mouse relativamente al layer in cui si verifica l'evento.
Nel caso di un evento di resize della finestra corrisponde alla proprietà height della stessa. Il valore è numerico.

modifiers

Questa proprietà viene utilizzata negli eventi relativi alla pressione dei tasti della tastiera e corrisponde ad un numero che specifica se è stato utilizzato un tasto speciale.
Premendo un tasto carattere sarà restituito 0, 2 col tasto Ctrl, 4 col tasto Shift, 6 col tasto Alt.

pageX

Rappresenta la posizione orizzontale in pixel del puntatore del mouse relativamente alla pagina. Il valore è numerico.

pageY

Rappresenta la posizione verticale  in pixel del puntatore del mouse relativamente alla pagina. Il valore è numerico.

screenX

Rappresenta la posizione orizzontale in pixel del puntatore del mouse relativamente allo schermo. Il valore è numerico.

screenY bgcolor="#F1F2DB" Rappresenta la posizione verticale in pixel del puntatore del mouse relativamente allo schermo. Il valore è numerico.
target

Rappresenta l'oggetto dal quale è scaturito l'evento.

type

Restituisce una stringa che rappresenta il nome dell'evento (es. "click" o "mousemove"). 

which

Numero che specifica l'eventuale valore ASCII di un pulsante premuto. Per il mouse, 1 rappresenta il pulsante sinistro, 2 il pulsante centrale, 3 il pulsante destro.

width

L'attributo width del frame o della findìestra.

x

Come layerX.

y

Come layerY.

 Nota: non è stato trattato l'evento DragDrop. Esso si verifica trascinando un elemento (come un file) nella finestra del browser ed è proprio dell'oggetto window. In caso venga intercettato, si può ottenere un Array data (Event.data) contenente l'URL degli oggetti trascinati.


*Ricordiamo che le spiegazioni qui riportate potrebbero essere invalidate dalle nuove versioni di Netscape Navigator.

Torna all'inizio | Home