event

Introduzione

Questo capitolo descrive il modello degli eventi del DOM Level 2 così come è implementato in Gecko. Viene descritta l'interfaccia Event, così come le interfacce per la registrazione di eventi per i nodi del DOM, i gestori di eventi, i listener e diversi esempi che mostrano come le interfacce dei diversi eventi si relazionano tra loro.

Vi è un diagramma eccellente che spiega chiaramente le tre fasi del flusso degli eventi nella bozza di DOM Level 3.

L'interfaccia Event

I gestori degli eventi possono essere assegnati a vari elementi DOM. Quando un dato evento si verifica, un oggetto evento viene creato dinamicamente e passato agli event listener che permettono di gestirlo. L'interfaccia Event del DOM è quindi accessibile dalla funzione che gestisce l'evento, alla quale viene passato un oggetto evento come primo e unico argomento.

Vi sono tre modi di assegnare un listener a un elemento. Con due di queste tecniche, l'oggetto evento viene passato implicitamente alla funzione che gestisce l'evento. Con la terza tecnica, occorre passare esplicitamente l'oggetto evento come parametro.

L'esempio seguente mostra come un oggetto evento viene passato a tale funzione e come può essere utilizzato all'interno della funzione.

Si noti che nel codice non viene passato alcun parametro "evt". L'oggetto evento viene passato automaticamente a foo. Tutto ciò che occorre fare è definire un parametro nel gestore di eventi che riceva l'oggetto evento.

function foo(evt) {
  // le funzioni per la gestione degli eventi come questa
  // ricevono un riferimento implicito all'oggetto evento che gestiscono
  // (in questo caso abbiamo scelto di chiamarlo "evt").
  alert(evt);
}
elementoTabella.onclick = foo;

Questo esempio è molto semplice, ma mostra una caratteristica importante degli eventi nel DOM di Gecko, cioè che è possibile accedere all'oggetto evento dalla funzione gestore. Una volta che si ha un riferimento a un evento, si può accedere a tutte le proprietà e ai metodi descritti in questo capitolo.

Gestori degli eventi DOM

Oltre all'oggetto event qui descritto, il DOM di Gecko fornisce anche metodi per la registrazione dei listener sui nodi del DOM, la rimozione di questi listeners ed eliminare gli eventi dal DOM. Questi event listener sugli elementi HTML o XML sono i modi principali per accedere agli eventi. Questi tre metodi sono descritti nella lista sottostante.

Si può anche passare un riferimento all'oggetto evento sotto forma di un parametro definito, chiamato event, alla funzione che gestisce l'evento. Il funzionamento è molto simile a quello della parola chiave this.

<html>
<head>
<title>esempio sul parametro evento</title>

<script type="text/javascript">

function mostraCoordinate(evt){
  alert(
    "valore clientX: " + evt.clientX + "\n" +
    "valore clientY: " + evt.clientY + "\n"
  );
}

</script>
</head>

<body onmousedown="mostraCoordinate(event)">
<p>Per conoscere le coordinate della posizione del mouse, clicca in qualunque punto di questa pagina.</p>
</body>
</html>

Utilizzando l'oggetto event predefinito è possibile passare altri parametri alla funzione, come mostrato nel seguente esempio:

<html>
<head>
<title>esempio sul parametro evento + parametri extra</title>

<script type="text/javascript">

var par2 = 'ciao';
var par3 = 'mondo!';

function mostraCoordinate(evt, p2, p3){
  alert(
    "valore clientX: " + evt.clientX + "\n"
    + "valore clientY: " + evt.clientY + "\n"
    + "parametro 2: " + p2 + "\n"
    + "parametro 3: " + p3 + "\n"
  );
}

</script>
</head>

<body onmousedown="mostraCoordinate(event, par2, par3)">
<p>Per conoscere le coordinate della posizione del mouse e visualizzare un saluto al mondo, clicca in qualunque punto di questa pagina.</p>
</body>
</html>

Proprietà

event.altKey
Restituisce un booleano che indica se il tasto <alt> è stato premuto durante l'evento.
event.bubbles
Restituisce un booleano che indica se l'evento emerge dal DOM.
event.button
Restituisce un intero che indica quale tasto del mouse è stato premuto.
event.cancelBubble
Restituisce un booleano che indica se l'evento è stato cancellato.
event.cancelable
Restituisce un booleano che indica se l'evento è cancellabile.
event.charCode
Restituisce il tasto carattere che è stato premuto e che ha scatenato l'evento keypress.
event.clientX
Restituisce la posizione orizzontale del puntatore del mouse.
event.clientY
Restituisce la posizione verticale del puntatore del mouse.
event.ctrlKey
Restituisce un booleano che indica se il tasto <ctrl> è stato premuto durante l'evento.
event.currentTarget
Restituisce un riferimento all'elemento a cui appartiene l'evento.
event.detail
Restituisce alcuni dettagli sull'evento.
event.eventPhase
Indica in quale fase si trova il flusso dell'elaborazione degli eventi.
event.explicitOriginalTarget
Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
event.isChar
Restituisce un booleano che indica se l'evento è stato causato dalla pressione di un tasto carattere.
event.keyCode
Restituisce un valore Unicode per un tasto non carattere che è stato premuto.
event.layerX
Restituisce la coordinata orizzontale relativa al layer corrente.
event.layerY
Restituisce la coordinata verticale relativa al layer corrente.
event.metaKey
Restituisce un booleano che indica se il tasto meta è stato premuto durante l'evento.
event.originalTarget
Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
event.pageX
Restituisce la coordinata orizzontale relativa alla pagina.
event.pageY
Restituisce la coordinata verticale relativa alla pagina.
event.relatedTarget
Identifica un elemento secondario legato all'evento.
event.screenX
Restituisce la posizione orizzontale relativa allo schermo.
event.screenY
Restituisce la posizione verticale relativa allo schermo.
event.shiftKey
Restituisce un booleano che indica se il tasto <shift> è stato premuto durante l'evento.
event.target
Restituisce un riferimento all'elemento al quale l'evento era legato originariamente.
event.timeStamp
Restituisce il timestamp nel quale l'evento è stato scatenato.
event.type
Restituisce il nome dell'evento (case-insensitive).
event.view
Identifica l'AbstractView dal quale l'evento è stato generato.
event.which
Restituisce il valore Unicode del tasto che è stato premuto, indipendentemente da quale tipo di tasto sia stato premuto.

Metodi

event.initEvent
Inizializza il valore di un evento che è stato creato tramite l'interfaccia DocumentEvent.
event.initKeyEvent
Inizializza un evento legato alla tastiera (specifico di Gecko).
event.initMouseEvent
Inizializza un evento legato al mouse
event.initUIEvent
Inizializza un evento legato all'interfaccia utente
event.preventBubble
Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
event.preventCapture
Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
event.preventDefault
Cancella l'evento (se è cancellabile).
event.stopPropagation
Arresta un'ulteriore propagazione degli eventi DOM.
 

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: teoli, khalid32, Federico
 Ultima modifica di: khalid32,