Nella programmazione tradizionale, le applicazioni vengono eseguite in sequenza dall’inizio alla fine per produrre i loro risultati. Tuttavia, al momento del modello predominante è quello della programmazione basata sull’evento. Script e programmi si aspettano senza fare alcun compito fino a quando non si verifica un evento. Una volta prodotto, corrono un compito associato all’aspetto di quell’evento e quando conclude, lo script o il programma ritorna allo stato standby.
JavaScript consente script con entrambi i metodi di programmazione: sequenziale e basata su evento. Gli eventi JavaScript consentono l’interazione tra applicazioni e utenti JavaScript. Ogni volta che viene premuto un pulsante, si verifica un evento. Ogni volta che viene premuto una chiave, viene prodotto anche un evento. Tuttavia, per un evento si verifica, non è obbligatorio che l’utente interviene, poiché ad esempio, ogni volta che viene caricata una pagina, viene anche prodotto un evento.
Domenica livello 1 non include le specifiche relative a Eventi JavaScript. Domenicale Level 2 include alcuni aspetti relativi a eventi e DOM LEVEL 3 includono la specifica completa di eventi JavaScript. Sfortunatamente, la specifica del livello 3 è stata pubblicata nel 2004, più di dieci anni dopo che i primi browser includevano eventi.
Per questo motivo, molte delle proprietà e dei metodi attuali relativi agli eventi sono incompatibili con quelli del sole . In effetti, i browser come Internet Explorer trattare gli eventi dopo il proprio modello incompatibili con lo standard.
Il modello di evento semplice è stato introdotto nella versione 4 dello standard HTML ed è considerato parte del livello DOM più basilare. Sebbene le sue funzionalità siano limitate, è l’unico modello compatibile con tutti i browser e quindi, l’unico che ti consente di creare applicazioni che funzionano nello stesso modo in tutti i browser.
15.1 Tipi di eventi
Ogni elemento XHTML ha il proprio elenco di possibili eventi che possono essere assegnati. Lo stesso tipo di evento (ad esempio, facendo clic sul pulsante sinistro del mouse) può essere definito per diversi elementi XHTML e lo stesso elemento XHTML può avere diversi eventi associati.
Il nome degli eventi è costruito attraverso il prefisso on, seguito dal nome inglese dell’azione associata all’evento. Pertanto, l’evento per fare clic su un elemento con il mouse viene chiamato e l’evento associato a Spostamento del mouse è chiamato onmousemove.
La seguente tabella riepiloga gli eventi più importanti definiti da JavaScript:
onblur <button>, , , <select>, <textarea>, onchange /td> <input>, <select>, <textarea> onclick ondblclick onfocus <button>, <input>, <label>, <select>, <textarea>, onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onreset <form> onresize onselect <input>, <textarea> onsubmit onunload Gli eventi più utilizzati nelle applicazioni Web tradizionali sono onload per attendere la pagina intera pagina, eventi , onmouseover, onmouseout per controllare il mouse e onsubmit per il controllo della spedizione del controllo Moduli.
Alcuni eventi nella tabella precedente (, onkeydown, , onreset, onsubmit) Consenti di evitare “Azione predefinita” di quell’evento. Più tardi questo comportamento è mostrato in dettaglio, il che potrebbe essere molto utile in alcune tecniche di programmazione.
Azioni tipiche che un utente esegue su una pagina web può portare a una successione di eventi. Premendo ad esempio su un tipo Gli eventi vengono attivati onmousedown, onclick, onmouseup e onsubmit consecutivamente.
15.1.1 Gestori di eventi
Un evento JavaScript da solo manca di utilità. Per gli eventi da utilizzare, le funzioni o il codice JavaScript devono essere associati ad ogni evento. In questo modo, quando si verifica un evento, il codice indicato viene eseguito, quindi l’applicazione può rispondere a qualsiasi evento che si verifica durante l’esecuzione.
Le funzioni o il codice JavaScript che sono definiti per ogni evento che sono chiamati evento Gestore (gestori di eventi in inglese) e come JavaScript è un linguaggio molto flessibile, ci sono diversi modi di indicare i gestori:
- gestori come attributi degli elementi XHTML.
- Ganalatori come funzioni JavaScript esterne.
- “Semantic” handlers.
15.1.1.1 gestori come gli attributi XHTML
Questo è il metodo più semplice e meno professionale per indicare il codice JavaScript che deve essere eseguito quando si verifica un evento. In questo caso, il codice è incluso in un attributo dell’elemento XHTML stesso. Nell’esempio seguente, si desidera visualizzare un messaggio quando l’utente fora con il mouse su un pulsante:
<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />
in questo Metodo, gli attributi XHTML sono definiti con lo stesso nome degli eventi che si desidera gestire. L’esempio precedente vuole solo controllare l’evento di punture con il mouse, il cui nome è onclick. Pertanto, l’elemento XHTML per il quale si desidera definire questo evento, deve includere un attributo chiamato .
Il contenuto dell’attributo è una stringa di testo che contiene Tutte le istruzioni JavaScript che vengono eseguite quando si verifica l’evento. In questo caso, il codice JavaScript è molto semplice (), poiché si tratta solo di mostrare un messaggio.
In questo altro esempio, quando l’utente fa clic su Sull’elemento mostra un messaggio e quando l’utente passa il mouse sopra l’elemento, viene visualizzato un altro messaggio:
<div onclick="console.log('Has pinchado con el ratón');" onmouseover="console.log('Acabas de pasar el ratón por encima');"> Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima</div>
L’altro esempio include una delle istruzioni più utilizzate nelle più antiche applicazioni JavaScript:
<body onload="console.log('La página se ha cargado completamente');"> ...</body>
Il messaggio precedente viene visualizzato dopo che la pagina è completamente carica, ovvero, dopo che il suo codice HTML è stato scaricato, le immagini e qualsiasi altro oggetto incluso nella pagina.
L’evento onload è uno dei più utilizzati poiché, come si vede nel capitolo DOM, le funzioni che consentono l’accesso e la manipolazione dei nodi Dom Tree sono disponibili solo quando la pagina è stata caricata complessa Taricamente.
15.1.1.2 Gestori eventi e variabile Questo
JavaScript definisce una variabile speciale chiamata this che viene creato automaticamente e questo è impiega in alcune tecniche di programmazione avanzate. Agli eventi, è possibile utilizzare la variabile this per fare riferimento all’elemento XHTML che ha causato l’evento. Questa variabile è molto utile per esempi come quanto segue:
Quando l’utente passa il mouse sopra il <div>, il colore del bordo viene mostrato nero. Quando il mouse lascia il <div>, il bordo viene visualizzato di nuovo con il colore grigio chiaro originale.
<div style="width:150px; height:60px; border:thin solid silver"> Sección de contenidos...</div>
/ div>
Se la variabile non viene utilizzata this, il codice necessario per modificare il colore dei bordi, sarebbe il seguente:
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';"> Sección de contenidos...</div>
Il codice precedente è troppo lungo e troppo inclinato per commettere errori. All’interno del codice di un evento, JavaScript crea automaticamente la variabile this, che si riferisce all’elemento XHTML che ha causato l’evento. Pertanto, l’esempio precedente può essere riscritto come segue:
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';"> Sección de contenidos...</div>
Il codice precedente è molto più compatto, più facile da leggere e scrivere e continuare a funzionare correttamente anche se il valore dell’attributo ID dell’ID <div>.
15.1.1.3 Gestori di eventi come funzioni esterne
La definizione di gestori di eventi negli attributi XHTML è un metodo semplice ma ingiunto per gestire gli eventi JavaScript. L’inconveniente principale è che è complicato in eccesso non appena vengono aggiunti alcune istruzioni, quindi si consiglia solo per i casi più semplici.
Quando il codice della funzione di gestione è più complesso, come il Convalida di un modulo, è consigliabile raggruppare tutto il codice JavaScript in una funzione esterna richiamata dal codice XHTML quando si verifica l’evento.
In questo modo, il seguente esempio:
<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />
può essere trasformato in:
function muestraMensaje() { console.log('Gracias por pinchar');}
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
In funzioni esterne non è possibile utilizzare la variabile this nello stesso modo di I gestori inseriti negli attributi XHTML. Pertanto, è necessario passare la variabile this come parametro alla funzione di gestione:
function resalta(elemento) { switch(elemento.style.borderColor) { case 'silver': case 'silver silver silver silver': case '#c0c0c0': elemento.style.borderColor = 'black'; break; case 'black': case 'black black black black': case '#000000': elemento.style.borderColor = 'silver'; break; }}
<div style="padding: .2em; width: 150px; height: 60px; border: thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)"> Sección de contenidos...</div>
Nell’esempio precedente, la funzione esterna viene superata il parametro this, che All’interno della funzione si chiama elemento. Passando this come parametro, è possibile accedere direttamente dalla funzione esterna alle proprietà dell’elemento che ha causato l’evento.
D’altra parte, l’esempio precedente è complicato dal modo in cui i diversi browser memorizzano il valore della proprietà borderColor. Mentre i negozi di Firefox (nel caso in cui i quattro bordi corrispondono a colori) il valore semplice black, Internet Explorer lo memorizza come black black black black e l’opera memorizza il suo esadecimale Rappresentanza #000000.
15.1.1.4 Manipoli eventi semantici
Utilizzare gli attributi XHTML o le funzioni esterne per aggiungere ai manager degli eventi ha un grave inconveniente : “Incorpora” il codice XHTML della pagina.
Come è noto, quando si creano pagine Web si consiglia di separare i contenuti (XHTML) dalla presentazione (CSS). Per quanto possibile, si consiglia anche di separare i contenuti (XHTML) dalla programmazione (JavaScript). Mix JavaScript e XHTML complica eccessivamente il codice sorgente della pagina, rende la sua manutenzione difficile e riduce la semantica del documento finale prodotto.
Fortunatamente, c’è un metodo alternativo per definire i gestori di eventi di Javascript. Questa tecnica è quella di assegnare funzioni esterne utilizzando le proprietà DOM degli elementi XHTML. Pertanto, il seguente esempio:
<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />Se puede transformar en:
<input type="button" value="Pinchame y verás" />
Il codice XHTML risultante è molto “pulito”, poiché non si mescola con il codice JavaScript. La tecnica dei manager semantici è composta da:
- Assegna un identificativo univoco all’elemento XHTML utilizzando l’attributo ID.
- Crea una funzione JavaScript in carica di gestire l’evento.
- Assegna la funzione a un evento specifico dell’elemento XHTML usando DOM.
Un altro ulteriore vantaggio di questa tecnica è che le funzioni esterne possono utilizzare la variabile this Riferito all’elemento che l’evento originale.
Assegnazione della funzione di gestione tramite DOM è un processo che richiede una spiegazione dettagliata. Innanzitutto, si ottiene il riferimento dell’elemento a cui verrà assegnato il gestore:
document.getElementById("pinchable");
Avanti, viene assegnato il Funzione esterna per l’evento desiderato tramite una proprietà di elementi con lo stesso nome dell’evento:
document.getElementById("pinchable").onclick = ...
Infine, l’esterno funzione. Come già menzionato nei capitoli precedenti, soprattutto (e la causa più comune degli errori) è quello di indicare solo il nome della funzione, cioè dispensare con le parentesi assegnando la funzione:
document.getElementById("pinchable").onclick = muestraMensaje;
Se le parentesi vengono aggiunte alla fine, la funzione viene effettivamente richiamata e assegnando il valore restituito dalla funzione all’evento Element.
L’unico inconveniente di questo metodo è che i gestori sono assegnati utilizzando le funzioni DOM, che possono essere utilizzate solo dopo che la pagina è stata completamente caricata. In questo modo, in modo che l’assegnazione dei gestori non sia errata, è necessario assicurarsi che la pagina sia già stata caricata.
uno dei modi più semplici per garantire che un determinato codice sia essere eseguito in seguito che la pagina è completamente caricata è quella di utilizzare l’evento onload:
window.onload = function() { document.getElementById("pinchable").onclick = muestraMensaje;}
L’arte precedente utilizza una funzione anonima per assegnare alcune istruzioni all’evento onload della pagina (in questo caso è stato impostato dall’oggetto ). In questo modo, per garantire che un determinato codice venga eseguito dopo che la pagina è stata caricata, è necessario solo includerlo all’interno della prossima costruzione:
window.onload = function() { ...}
15.2 Il flusso di eventi
Oltre agli eventi di base che sono stati visti, i browser includono un meccanismo correlato chiamato flusso di eventi o “flusso evento”. Il flusso di eventi consente a diversi elementi di rispondere allo stesso evento.
Se un elemento <div> con un pulsante è definito sul suo interno quando l’utente scava Il pulsante, il browser consente di assegnare una funzione di risposta del pulsante, un’altra funzione di risposta a <div> che contiene e un’altra funzione di risposta alla pagina intera. In questo modo, un singolo evento (la pulsazione di un pulsante) provoca la risposta a tre elementi sulla pagina (compresa la pagina stessa).
L’ordine su cui gli eventi assegnati a ciascun elemento sono eseguiti dal La pagina è ciò che costituisce il flusso di eventi. Inoltre, ci sono molte differenze nel flusso di eventi di ciascun browser.
15.2.1 Event Broling
In questo modello di flusso di eventi, l’ordine che è seguito è dall’elemento più specifico per l’elemento meno specifico.
Nei prossimi esempi, viene utilizzata la seguente pagina HTML:
<html onclick="procesaEvento()"> <head><title>Ejemplo de flujo de eventos</title></head> <body onclick="procesaEvento()"> <div onclick="procesaEvento()">Pincha aqui</div> </body></html>
Quando premuto sul testo “Clicca qui” che è all’interno del <div>, i seguenti eventi vengono eseguiti nell’ordine che mostra il seguente schema:
Figura 15.1 Schema operativo “Event Browning”
Il primo evento che viene preso in considerazione è quello generato dall’ID
contenente il messaggio. Quindi il browser esegue gli ascendenti dell’elemento finché non raggiunge il livello superiore, che è il document elemento “>
Questo modello di flusso evento è quello che include Internet Explorer Browser. I browser della famiglia Mozilla (ad esempio Firefox) supportano anche questo modello, ma leggermente modificato. L’esempio precedente in un browser familiare Mozilla presenta il seguente flusso di eventi:
Figura 15.2 “Event Brolling “Schema operativo nei browser mozilla
Sebbene l’oggetto window non fa parte del DOM, il flusso di eventi implementato da Mozilla Travel the Element Ascendants fino allo stesso oggetto window, aggiungendo un evento più evento al modello di Internet Explorer.
15.2.2 Cattura dell’evento
In quell’altro Modello, il flusso di eventi è definito dall’elemento meno specifico all’elemento più specifico. In altre parole, il meccanismo definito è precisamente il contrario di “event gorgogliante”. Questo modello è stato utilizzato dal browser Missing Netscape Navigator 4.0.
15.2.3 Eventi DOM
Il flusso di evento definito nella specifica del sole supporta sia bollendo che il cattura, ma l’evento ” catturare “corre prima. I due flussi di eventi viaggiano tutti gli oggetti DOM dall’oggetto document all’elemento più specifico e viceversa. Inoltre, la maggior parte dei browser implementa gli standard, il flusso continua fino all’oggetto window.
il flusso di evento DOM dall’esempio precedente è mostrato di seguito:
Figura 15.3 Schema di flusso evento del modello DOM
il più specifico Elemento del flusso di eventi non è il <div> che attiva l’esecuzione degli eventi, ma il nodo di tipo TextNode che contiene
. Il fatto di combinare i due flussi di evento, provoca il nodo più specifico per eseguire due eventi consecutivi in modo consecutivo.
15.3 Ganalatori e ascoltatori
Nelle sezioni precedenti il concetto è stato introdotto da “Gestore eventi “o gestore di eventi, che sono le funzioni che rispondono agli eventi che si verificano. Inoltre, tre modi per definire i gestori di eventi sono stati visualizzati per il modello di evento di base:
- codice JavaScript all’interno di un attributo della voce HTML
- Definizione dell’evento nell’HTML Articolo stesso ma il gestore è una funzione esterna
- gestori semantici assegnati via Sun senza la necessità di modificare il codice HTML della pagina
uno di questi modelli funziona correttamente in Tutti i browser disponibili oggi. Si presentano le differenze tra i browser quando è definito più di un gestore di eventi per lo stesso evento di un elemento. Il modo per assegnare e “dissungare” le maniglie multiple dipendono completamente dal browser utilizzato.
15.3.1 Manipolari DOM
La specifica SDI definisce altri due metodi simili a quelli disponibili per Internet Explorer e cosiddetto addEventListener() e removeEventListener() per associare e disassociare i gestori di eventi.
La principale differenza tra questi metodi E quanto sopra è che in questo caso sono necessari tre parametri: il nome del “listener eventi”, un riferimento alla funzione responsabile dell’elaborazione dell’evento e del tipo di flusso di eventi a cui è applicato.
Il primo argomento non è il nome completo dell’evento come succede nel modello di Internet Explorer, ma è necessario eliminare il prefisso on. In altre parole, se su Internet Explorer il nome verrà ora utilizzato click.
Il terzo parametro è , il gestore viene utilizzato nella fase di acquisizione. Se il terzo parametro è false, il gestore è associato alla fase di bollente.
Avanti, gli esempi sopra indicati vengono visualizzati utilizzando i metodi definiti da DOM:
function muestraMensaje() { console.log("Has pulsado el ratón");}var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, false); // Más adelante se decide desasociar la función al eventoelDiv.removeEventListener("click", muestraMensaje, false);
associando a più Funziona a un singolo evento:
function muestraMensaje() { console.log("Has pulsado el ratón");} function muestraOtroMensaje() { console.log("Has pulsado el ratón y por eso se muestran estos mensajes");} var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, true);elDiv.addEventListener("click", muestraOtroMensaje, true);
Se una funzione è associata a un determinato flusso di eventi, tale funzione può essere disassociato solo in lo stesso tipo di flusso di eventi. Se è considerato il seguente esempio:
function muestraMensaje() { console.log("Has pulsado el ratón");} var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, false); // Más adelante se decide desasociar la función al eventoelDiv.removeEventListener("click", muestraMensaje, true);
le ultime istruzioni tenta di dissociare la funzione muestraMensaje Nel flusso di eventi di acquisizione, mentre quando si associala, è stato indicato il flusso di eventi di bollente. Sebbene l’esecuzione dell’applicazione non si ferma e non si verifica alcun errore, l’ultima istruzione non ha alcun effetto.
15.4 L’evento
Quando si verifica un evento, non è sufficiente Assegnazione di una funzione responsabile dell’elaborazione di tale evento. Normalmente, la funzione che elabora l’evento ha bisogno di informazioni sull’evento prodotta: la chiave che è stata premuta, la posizione del mouse, l’elemento che l’evento ha prodotto, ecc.
L’oggetto event è il meccanismo definito dai browser per fornire tutte le informazioni. È un oggetto che viene creato automaticamente quando si verifica un evento e che viene distrutto automaticamente quando tutte le funzioni assegnate all’evento sono state eseguite.
La domenica specifica che l’oggetto event è l’unico parametro che deve andare alle funzioni responsabili degli eventi di elaborazione. Pertanto, nei browser che seguono gli standard, è possibile accedere all’oggetto event attraverso l’array degli argomenti della funzione:
elDiv.onclick = function() { var elEvento = arguments;}
È anche possibile indicare l’argomento nome esplicitamente:
elDiv.onclick = function(event) { ...}
Il funzionamento dei browser che seguono gli standard può sembrare “magico”, poiché nella dichiarazione della funzione è indicato che ha un parametro, ma nell’applicazione nessun parametro è passato a tale funzione. In realtà, i browser che seguono gli standard creano automaticamente quel parametro e passalo sempre alla funzione in carica di gestire l’evento.
15.4.1 Proprietà e metodi
Anche se il meccanismo definito da Browser per l’oggetto event è simile, ci sono numerose differenze non appena le proprietà e i metodi dell’oggetto.
15.4.1.1 Proprietà definite da DOM
La seguente tabella raccoglie le proprietà definite per nei browser che seguono gli standard:
altKey false in un altro caso button 0 – Nessun pulsante premuto 1 – È stato premuto il pulsante izquierdo 2 – Se ha pulsado el botón derecho 3 – Se pulsan a la vez el botón izquierdo y el derecho 4 – Se ha pulsado el botón central 5 – Se pulsan a la vez el botón izquierdo y el central 6 – Se pulsan a la vez el botón derecho y el central 7` – vengono premuti contemporaneamente il 3 cancelable cancelBubble charCode / TD> clientX ctrlKey false in un altro caso currentTarget detail
eventPhase 0 – Phase Captura 1 – Nella voce di destinazione 2 – Phase Bubbling isChar keyCode metaKey false in un altro caso pageX pageY preventDefault() relatedTarget screenX screenY shiftKey false in un altro caso stopPropagation() target timeStamp type è prodotto
A differenza di cosa succede con Internet Explorer, la maggior parte delle proprietà dell’oggetto event di SOL lettura. Nello specifico, solo le seguenti proprietà vengono lette e scrivono: altKey, button e keyCode.
Il tasto è una chiave speciale che si trova su alcune tastiere di computer molto vecchie. Attualmente, nel PC Computer è assimilato al tasto Alt o il tasto Windows, mentre su computer Mac digita computer è assimilato al tasto Command.
15.4.2 Similazione e differenze tra i browser
15.4.2.1 Similazione
In entrambi i casi la proprietà del tipo viene utilizzata per ottenere il tipo di evento cioè:
function procesaEvento(elEvento) { if(elEvento.type == "click") { console.log("Has pulsado el raton"); } else if(elEvento.type == "mouseover") { console.log("Has movido el raton"); }} elDiv.onclick = procesaEvento;elDiv.onmouseover = procesaEvento;
Mentre il gestore di eventi include il prefisso on in Il tuo nome, il tipo di evento restituito dalla proprietà type dispensa da quel prefisso.Ecco perché nell’esempio precedente confronta il suo valore con click e mouseover e non con e onmouseover.
Un’altra somiglianza è l’uso della proprietà keyCode per ottenere il codice corrispondente al carattere della chiave che è stata premuta. La chiave pulsata non rappresenta sempre un carattere alfanumerico. Quando si preme Ad esempio, il codice . La barra spaziale corrisponde al codice 32 e il tasto Elimina ha un codice uguale a .
A più Modo immediato Per verificare se sono stati premuti alcuni tasti speciali, è quello di utilizzare le proprietà shiftKey, altKey e ctrlKey.
Per ottenere la posizione del mouse rispetto alla parte visibile della finestra, le proprietà e clientY. Allo stesso modo, per ottenere la posizione del puntatore del mouse rispetto a tutto schermo, vengono utilizzate le proprietà e screenY.
15.4.2.2 Differenze
Una delle differenze principali è il modo in cui è ottenuto l’elemento che origina dell’evento. Se un elemento <div> è assegnato un evento , premendo con il mouse l’interno di <div> Un evento il cui obiettivo è originato è il .
// Internet Explorervar objetivo = elEvento.srcElement; // Navegadores que siguen los estandaresvar objetivo = elEvento.target;
Un’altra differenza importante è quella relativa ad ottenere il carattere corrispondente alla chiave pulsata. Ogni tasto pulsato ha associato due codici diversi: il primo è il codice della chiave che è stato premuto e l’altro codice è quello che si riferisce al carattere pulsato.
Il primo codice è un codice chiave interno Per JavaScript. Il secondo codice coincide con il codice ASCII del personaggio. In questo modo, la lettera a ha un codice interno uguale a 65 e un codice ASCII di 97. D’altra parte, la lettera A ha un codice interno anche di 65 e un codice ASCII di 95.
In Internet Explorer, il contenuto della proprietà keyCode dipende da ogni evento. In “Key Press” eventi (onkeyup e onkeydown) Il suo valore è uguale al codice interno. In “Scrivi con tasti” Eventi (onkeypress) Il suo valore è uguale al codice ASCII del carattere pressato.
al contrario, nei navigatori che seguono Gli standard di proprietà keyCode è uguale al codice interno in “tasto premere” eventi (onkeyup e onkeydown) ed è uguale a 0 al “Scrivi con tasti” Eventi (onkeypress
In pratica, questo presuppone che negli eventi onkeyup è possibile utilizzare la stessa proprietà in tutti i browser:
function manejador(elEvento) { var evento = elEvento || window.event; console.log(" El código de la tecla pulsada es " + evento.keyCode);}document.onkeyup = manejador;document.onkeydown = manejador;
In questo caso, se la pagina viene caricata in qualsiasi browser e premuto ad esempio il tasto A, il messaggio successivo:
Figura 15.4 Messaggio visualizzato nel browser Firefox
La grande differenza si verifica E Quando si tenta di ottenere il carattere che è stato premuto, in questo caso la lettera a. Per ottenere la lettera, devi prima ottenere il tuo codice ASCII. Come discusso, in Internet esplorare il valore della proprietà keyCode nell’evento onkeypress è uguale al carattere ASCII:
function manejador() { var evento = window.event;
// Internet Explorer var codigo = evento.keyCode;} document.onkeypress = manejador;
Tuttavia, nei browser che non sono Internet Explorer, Il codice precedente è uguale a 0 per qualsiasi tasto impulso. In questi browser seguendo gli standard, la proprietà dovrebbe essere utilizzata charCode, che restituisce il codice del tasto pulsato, ma solo per l’evento onkeypress:
function manejador(elEvento) { var evento = elEvento;
// Navegadores que siguen los estándares var codigo = evento.charCode;} document.onkeypress = manejador;
Una volta ottenuto il Codice In ogni browser, la funzione deve essere utilizzata String.fromCharCode() per ottenere il carattere il cui codice ASCII viene passato come parametro. Pertanto, la soluzione completa per ottenere la chiave pulsata in qualsiasi browser è la seguente:
function manejador(elEvento) { var evento = elEvento || window.event; var codigo = evento.charCode || evento.keyCode; var caracter = String.fromCharCode(codigo);} document.onkeypress = manejador;
Una delle proprietà più interessanti È la possibilità di prevenire il completamento del comportamento normale di un evento.In altre parole, con JavaScript è possibile non mostrare alcun carattere quando viene premuto un tasto, non inviare un modulo dopo aver premuto il pulsante di spedizione, non caricare alcuna pagina premendo un collegamento, ecc. Il metodo avanzato per impedire un evento di eseguire la sua azione associata dipende da ciascun browser:
// Navegadores que siguen los estandareselEvento.preventDefault();
Nel modello di evento di base anche è possibile impedire il comportamento predefinito di alcuni eventi. Se ad esempio in un elemento <textarea> è indicato il seguente gestore evento:
<textarea onkeypress="return false;"></textarea>
Nel <textarea> Precedente non sarà possibile scrivere qualsiasi carattere, poiché il gestore di eventi restituisce false e questo è il valore necessario per prevenire Le estremità di eseguire l’evento e quindi per evitare che la lettera venga scritta.
Quindi, è possibile definire maniglie degli eventi che restituiscono o false a seconda di alcuni parametri. Ad esempio, un numero di caratteri che può essere scritto può essere progettato in <textarea>:
function limita(maximoCaracteres) { var elemento = document.getElementById("texto"); if(elemento.value.length >= maximoCaracteres ) { return false; } else { return true; }}
<textarea onkeypress="return limita(100);"></textarea>
Il funzionamento dell’esempio precedente è dettagliato di seguito:
- l’evento
onkeypressper controllare se il tasto è scritto o meno. - Il valore restituito viene restituito dalla funzione esterna
limita()a cui il valore è superato il valore100. - se il valore restituito da è , l’evento si verifica normalmente e il carattere è scritto in
<textarea>. Se il valore restituito dalimita()èfalse, l’evento non si verifica e quindi il carattere non è scritto in<textarea>. - La funzione
limita()restituisce ofalsedopo aver verificato se il numero di caratteri del<textarea>è superiore o inferiore al numero massimo di caratteri che è accaduto come parametro.
L’oggetto event consente anche di interrompere completamente l’esecuzione del normale flusso di eventi:
// Navegadores que siguen los estandareselEvento.stopPropagation();
Fermando il flusso di eventi in sospeso, gli eventi che rimangono da quel momento sono stati sovradati fino a quando tutti gli elementi in sospeso vengono eseguiti fino all’elemento window.
15.5 Tipi di eventi
L’elenco completo degli eventi che può essere generato in un browser può essere diviso in quattro grandi g rupie Specifica DOM Definisce i seguenti gruppi:
- Eventi del mouse: hanno origine quando l’utente utilizza il mouse per eseguire alcune azioni.
- Eventi tastiera: hanno origine quando l’utente preme Qualsiasi tasto sulla sua tastiera.
- Eventi HTML: hanno origine quando si verificano modifiche nella finestra del browser o quando si verificano determinate interazioni tra il client e il server.
- Dom Events: hanno origine quando hanno Un cambiamento avviene nella struttura DOM della pagina. Sono anche chiamati “eventi di mutazione”.
15.5.1 Eventi del mouse
Eventi del mouse sono, con molta differenza, la maggior parte dei dipendenti nelle applicazioni Web. Gli eventi che sono inclusi in questa classificazione sono i seguenti:
click dblclick viene premuto due volte
mousedown mouseout mouseover mouseup mousemove Tutti gli elementi dalle pagine supportano gli eventi della tabella precedente.
15.5.1.1 Proprietà
L’oggetto evento contiene le seguenti proprietà per gli eventi del mouse:
- coordinate del mouse (tutte le diverse coordinate relative a elementi diversi)
- la proprietà
type - la proprietà
srcElement(Internet Explorer) otarget(DOM) - Proprietà
shiftKey,ctrlKey,altKeyemetaKey(solo Dom) - La proprietà (solo in eventi
mousedown,mousemove,mouseout,mouseoverEmouseup)
EVENTI mouseover e mouseout hanno proprietà aggiuntive. Internet Explorer definisce la proprietà fromElement, che si riferisce all’elemento da cui è stato spostato il puntatore del mouse e toElement che è l’elemento a cui è l’elemento Il puntatore del mouse si è spostato. In questo modo, nell’evento mouseover, la proprietà toElement è identico a srcElement e Nell’evento mouseout, la proprietà fromElement è identico a srcElement.
Nei browser che supportano lo standard DOM, c’è solo una proprietà chiamata relatedTarget. Nell’evento mouseout, relatedTarget punta all’elemento a cui si è spostato il mouse. Nell’evento mouseover, relatedTarget punta all’elemento da cui è stato spostato il puntatore del mouse.
Quando a Il pulsante del mouse viene premuto, la sequenza di eventi che si verifica è la seguente: mousedown, mouseup, . Pertanto, la sequenza di eventi necessari per raggiungere il doppio clic diventa complesso come quanto segue: mousedown, mouseup, click, mousedown, mouseup, click, dblclick.
15.5.2 Eventi tastiera
Gli eventi che sono inclusi in questa classificazione sono i seguenti:
keydown è prodotto quando viene tirato un tasto corrispondente a un alfanumerico Carattere (i tessuti non vengono presi in considerazione come SHIFT, , ecc.). Si verifica anche continuamente se il “5950064a9e”> è prodotto quando viene rilasciato qualsiasi tasto pulsato
15.5.2.1 Proprietà
L’oggetto evento contiene le seguenti proprietà per gli eventi della tastiera:
- la proprietà
keyCode - La proprietà
charCode(solo SOL) - La proprietà
srcElement(Internet Explorer) otarget(DOM) - Proprietà
shiftKey,ctrlKey,altKeyemetaKey(solo solare solo)
Quando viene premuto un tasto su un carattere alfanumerico, si verifica la seguente sequenza di Eventi: , keypress, keyup. Quando viene premuto un altro tipo di tasto, si verifica una sequenza seguente: , keyup. Se la chiave è tenuta, nel primo caso, gli eventi vengono continuamente ripetuti / / / / / / /
keypress e nel secondo caso, ripetere l’evento continuamente.
15.5.3 Eventi HTML
Gli eventi HTML definiti vengono raccolti nella seguente tabella:
load <object> quando l’oggetto scompare. abort <object> quando l’utente interrompe il download dell’articolo prima che sia finito error <img> quando l’immagine non può essere caricata completamente e nell’elemento <object> quando la voce non carica correttamente select <input> e <textarea>) change <input> e <textarea>) Perde la messa a fuoco e il suo contenuto è variato. Si verifica anche quando il valore di un elemento <select> <input type="submit">) reset resize scroll focus fb2bd1e386 “>
focus 7E66FA8B9A “>
Uno degli eventi più utilizzati è l’evento load, poiché tutte le manipolazioni eseguite da DOM richiedono che la pagina venga caricata completa e quindi, l’albero DOM è stato completamente completamente Costruito.
L’elemento Definisce le proprietà scrollLeft e scrollTop che può essere utilizzato insieme all’evento scroll.
15.5.4 Eventi Sun
Sebbene gli eventi di questo tipo siano parte del Le specifiche ufficiali del sole, non sono ancora state implementate in tutti i browser.La seguente tabella raccoglie gli eventi più importanti di questo tipo:
DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument esercizio 17
Visualizzazione di visualizzazione
Esercizio 18
Visualizzazione di visualizzazione
Esercizio 19
Visualizza enunciazione