Risultati di ricerca

    event

    « Reference del DOM

    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.
     

    Etichette del documento e nomi di chi ha collaborato alla sua stesura

    Hanno collaborato a questa pagina: Federico, teoli
    Ultima modifica di: teoli,