--- title: event slug: Web/API/Event tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/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: {{ Deprecated_inline() }} 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: {{ Obsolete_inline() }} Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
event.preventCapture: {{ Obsolete_inline() }} 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.

{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}

Introduzione

L'interfaccia Event

Gestori degli eventi DOM

Proprietà

Metodi

L'interfaccia `Event`