Documenta gli eventi javascript. JavaScript - Tipi di eventi. Collega gli eventi agli elementi corretti

Il tema degli eventi è molto importante e molto interessante. Grazie a lei, puoi fare molte cose interessanti di cui l'utente sarà felice. Evento JavaScriptè un'azione specifica che viene attivata dall'utente o dal browser. Ad esempio, un evento può essere un clic del mouse su un pulsante, il movimento del mouse, la focalizzazione su un elemento, la modifica di un valore in un campo di testo, la modifica delle dimensioni della finestra del browser e così via.

Ho preparato una tabella con tutti gli eventi (che conosco almeno) in JavaScript... In esso troverai, in primo luogo, il nome dell'evento, gli elementi che possono generare questo evento e la descrizione dell'evento stesso. Eventi JavaScript.

Evento	Un oggetto	Causa dell'evento
Interrompi	Immagine	Interruzione del caricamento dell'immagine
Sfocatura		Perdita di messa a fuoco di un elemento
Modificare	FileCarica, Seleziona, Testo, Area di testo	Cambio di valore
Clic	Area, Pulsante, Casella di controllo, Documento, Collegamento, Radio, Reimposta, Invia	Fare clic con il mouse su un elemento
Doppio clic	Area, Documento, Link	Fare doppio clic su un elemento
Trascina e rilascia	Finestra	Sposta nella finestra del browser
Messa a fuoco	Pulsante, Casella di controllo, Caricamento file, Cornice, Livello, Password, Radio, Ripristina, Seleziona, Invia, Testo, Area di testo, Finestra	Mettere a fuoco un elemento
Tasto giù		Premendo un tasto sulla tastiera
KeyPress	Documento, immagine, collegamento, area di testo	Tenere premuto un tasto sulla tastiera
KeyUp	Documento, immagine, collegamento, area di testo	Rilascio di un tasto sulla tastiera
Carico	Documento, immagine, livello, finestra
MouseGiù	Pulsante, documento, collegamento	Pulsante del mouse premuto
MouseMove	Finestra	Mouse in movimento
MouseOut	Area, livello, collegamento	Il mouse è fuori dai limiti dell'elemento
Passa il mouse	Area, livello, collegamento	Il mouse è sull'elemento
MouseUp	Pulsante, documento, collegamento	Pulsante del mouse rilasciato
Spostare	Portafoto	Spostare un oggetto
Ripristina	Modulo	Ripristino del modulo
Ridimensiona	Cornice, finestra	Ridimensionamento
Selezionare	Testo, Area di testo	Selezione del testo
Invia	Modulo	Trasferimento dati
Scaricare	Finestra	Scaricare la pagina corrente

Ora scopriamo come usa gli eventi in JavaScript... Ci sono i cosiddetti gestori di eventi. Gestori di eventi basta determinare cosa accadrà quando si verifica un determinato evento. Gestori di eventi JavaScript ha la seguente forma generale:

SuNomeEventi

Cioè, prima viene il prefisso " Su", quindi qual è il prossimo? nome dell'evento, per esempio, tale gestori di eventi: suFocus, al clic, suSubmit eccetera. Penso che qui non ci fossero domande. E ora la domanda principale: " Come si utilizzano gli eventi in JavaScript?". L'area della loro applicazione è enorme e ora considereremo un problema con te. Ci sono tre collegamenti nella pagina. Ciascuno dei collegamenti è responsabile di un diverso colore di sfondo (ad esempio bianco, giallo e verde ). Inizialmente, lo sfondo è bianco. Quando si passa il mouse su un determinato collegamento, il colore di sfondo cambia. Al passaggio del mouse, il colore di sfondo torna al valore predefinito. Quando si fa clic con il mouse sul collegamento, il colore di sfondo viene mantenuto come predefinito.

bianco
Giallo
Verde

Affrontiamo questo copione, anzi del tutto Pagina HTML con il supporto JavaScript e CSS(in altre parole, questo è un esempio DHTML). I soliti prima di tutto Tag HTML, con cui qualsiasi inizia Pagina HTML... Successivamente, creiamo uno stile in cui richiediamo che tutti i collegamenti in questa pagina siano blu, sottolineati e che il puntatore del mouse su di essi abbia la forma di "Puntatore". Potresti dire: "Perché hai bisogno di impostare lo stile? Dopotutto, i collegamenti saranno comunque esattamente gli stessi". Esatto, link, ma non abbiamo link in quanto tali (dopotutto, non ci sono attributi href nel tag), quindi per impostazione predefinita saranno solo testo nero (sebbene sia possibile fare clic anche sul testo). Pertanto, lo stile è un must. Puoi rimuoverlo e vedere cosa succede. Meglio ancora, metti attributo href(qualsiasi valore, anche vuoto) e spiega perché lo script ha smesso di funzionare. Inoltre inizia già JavaScript... Creiamo una variabile default_color che è responsabile del colore predefinito. Ci sono poi tre funzioni:

Funzione setTempColor() responsabile del cambio di colore temporaneo.

Funzione setDefaultColor() responsabile della modifica del colore predefinito.

Funzione defaultColore () imposta il colore di sfondo predefinito.

Poi ci sono collegamenti con attributi nel modulo gestori di eventi... Quando passi il mouse sul link, Evento MouseOver, rispettivamente, Gestore di eventi onMouseOver chiama la funzione setTempColor() e passa il parametro corrispondente. Quando rimuovi il mouse dall'elemento, Evento MouseOut, e poi chiamato defaultColor() funzione, che rende il colore di sfondo predefinito. E infine, quando fai clic sul collegamento ( Gestore onClick) la funzione si chiama setDefaultColor(), che imposta il colore specificato nel parametro sul colore di sfondo predefinito. Come puoi vedere, tutto è abbastanza semplice.

Era il principio dell'uso degli eventi in JavaScript, e poi tutto dipende solo dalla tua immaginazione!

La capacità di JavaScript di creare pagine html dinamiche si basa su tre pilastri. Due di questi sono già stati trattati in articoli precedenti. E il terzo sono gli eventi.

• Gestione della finestra del browser - utilizzando l'oggetto finestra.
• La gestione degli oggetti all'interno di una finestra è il DOM.
• Esecuzione di codice javaScript sugli eventi.

Evento- la reazione del computer all'azione dell'utente. Ad esempio, con t. Un evento javaScript è considerato la pressione di un pulsante della tastiera, il movimento e i clic del mouse e la chiusura della finestra del browser. Tutti gli eventi con t. javaScript è generato da oggetti documento e browser (nessun concetto di 'utente'). Ad esempio, quando si fa clic su un paragrafo, l'evento clic del mouse viene generato da un oggetto, un paragrafo.

Per poter eseguire del codice javaScript che risponda agli eventi, è necessario associare questo codice a un evento generato da un oggetto specifico, ad es. con un evento specifico da un oggetto specifico. Questa azione si chiama - abbonamento all'evento.

Sottoscrizione significa che associamo una funzione a un evento specifico da un oggetto specifico nel modello a oggetti del browser. E quando questo oggetto crea (genera) questo evento, questa funzione si attiverà automaticamente.

• onclick - facendo clic su un pulsante del mouse.
• ondblclick - doppio clic del pulsante del mouse.
• onmousedown - il pulsante del mouse viene premuto (down).
• onmousemove - il mouse si sposta sull'oggetto (si verificano molti eventi, movimento del mouse di 1px = 1 evento).
• onmouseout - il mouse lascia l'oggetto.
• onmouseover: il mouse si sposta sull'oggetto desiderato.
• onmouseup - il pulsante del mouse viene rilasciato (sollevato).
• onkeydown - pulsante della tastiera premuto (giù).
• onkeypress - premendo un pulsante della tastiera.
• onkeyup - il pulsante della tastiera viene rilasciato (sollevato).
• onblur - perdita della messa a fuoco dell'input (cursore lampeggiante).
• onfocus - il momento in cui questo elemento riceve il focus dell'input.
• onchange - generato dal controllo dopo aver perso lo stato attivo, se il testo è cambiato (ad esempio, in una casella di testo). Un'eccezione è la voce di elenco "seleziona", in cui questo evento viene generato immediatamente e non dopo la perdita del focus.
• onload - generato quando la pagina ha terminato il caricamento nella finestra. Solitamente utilizzato quando è necessario eseguire del codice javaScript dopo che la pagina è stata completamente caricata.
• onunload - si verifica prima che il documento venga scaricato dalla finestra (cioè quando chiudiamo questo documento o passiamo a un altro documento).
• onreset - il modulo è stato ripristinato.
• onsubmit - il modulo dati è stato inviato.

Abbonamento agli eventi

• Abbonamento tramite javaScript. Questo metodo viene utilizzato nella maggior parte dei casi. Per prima cosa dobbiamo trovare l'oggetto dell'elemento per il quale vogliamo sottoscrivere l'evento, ad esempio, tramite il metodo getElementById (specificare l'id dell'elemento richiesto).

funzione myFunc() ( // ho creato una semplice funzione avviso ("ciao"); ) function pageInit() (var p = document. getElementById ("1"); p. onclick = myFunc;) // chiamato la funzione per attivare l'evento finestra. onload = pageInit; // l'evento verrà attivato quando la pagina viene caricata < p id= 1 >Paragrafo 1 // imposta l'id per il paragrafo

• Abbonamento tramite codice html. Lo svantaggio di questo metodo è che ingombra il codice html con il suo codice javaScript; inoltre, ci sono diverse limitazioni e in casi complessi è scomodo da usare.

< script type= "text/javascript" >funzione myFunc() ( // ho creato una semplice funzione avviso ("ciao"); ) < p onclick= "myFunc()" >Paragrafo 2 // chiamato la funzione

Modello di gestione degli eventi

Quando si verifica un evento per un elemento, dovrebbero verificarsi anche eventi simili per tutti i suoi elementi padre fino alla parte superiore della pagina (fino a "corpo", poiché è l'area principale del documento). Quindi, qualsiasi evento che si verifica nella pagina verrà attivato sul corpo.

Quindi sorge la domanda, in quale ordine si verificheranno tali eventi? Nei browser moderni, il modello di gestione degli eventi è chiamato modello a bolle a bolle. La sua essenza: in primo luogo, si verifica un evento per l'elemento su cui è stato fatto clic, quindi per il suo genitore e così via fino in cima, fino al "corpo".

Elemento -> elemento 2 -> documento -> finestra

Parametri evento (oggetto evento)

C'è un tale oggetto evento che ha molte proprietà. Leggendo queste proprietà, è possibile ottenere informazioni sugli eventi. Per ottenere informazioni, devi prima ottenere l'oggetto stesso.

Il principale proprietà di questo oggetto:

• x, y - coordinate del mouse al momento dell'evento.
• clientX, clientY sono gli stessi.
• offsetX, offsetY - lo stesso, ma questo è l'offset del mouse rispetto all'elemento genitore.
• screenX, screenY - coordinate dello schermo.
• pulsante - quale pulsante del mouse è stato premuto (0 - non premuto, 1 - pulsante sinistro premuto, 2 - pulsante destro premuto, 4 - pulsante centrale premuto).
• keyCode Il codice numerico del tasto della tastiera premuto.
• srcElement - l'elemento che ha generato l'evento.
• fromElement - l'elemento da cui si è allontanato il mouse.
• toElement - un'indicazione dell'oggetto su cui è passato il mouse.
• cancelBubble - un modo non standard, se gli dai il valore true, la "bolla pop-up" verrà cancellata; oppure è possibile modificare il codice del tasto premuto dall'utente.

Dall'autore: Dopo che la pagina Web è stata completamente caricata e pronta, viene attivata un'intera cascata di eventi in JavaScript, che diventa ancora maggiore quando l'utente inizia a interagire con la pagina in un modo o nell'altro. Gli eventi includono il caricamento di una pagina, lo scorrimento verso il basso, il clic su un pulsante o persino la compilazione di un modulo. Per attivare eventi in JavaScript, hai bisogno di un codice speciale che progetti e scrivi tu stesso, creando così un'interazione più profonda.

Gli eventi in JS possono essere suddivisi in 4 grandi gruppi:

Eventi dell'interfaccia utente: si attivano quando l'utente interagisce con l'interfaccia utente del browser (pulsanti intorno a una pagina Web che fanno parte dell'interfaccia del browser). Questi eventi possono includere anche quelle azioni che la pagina esegue indipendentemente dall'utente. Questi eventi includono il ridimensionamento della finestra, lo scorrimento della pagina e il caricamento e lo scaricamento del contenuto.

Eventi tastiera, mouse e touchscreen: vengono attivati ​​quando l'utente preme o rilascia i pulsanti sulla tastiera, controlla il mouse, il trackpad o utilizza il touchscreen.

Eventi di focus e handicap. Principalmente associato ai moduli: il campo di input "riceve il focus" quando l'utente è pronto per interagire con esso. Altri eventi tengono traccia degli invii dei moduli, delle modifiche ai valori dei campi del modulo e così via.

JavaScript. Avvio veloce

Eventi di mutazione e osservatori. Gli elementi mutanti vengono tracciati quando la struttura del DOM cambia: ad esempio, quando gli elementi della pagina vengono inseriti o rimossi dallo script.

Associazione di un gestore di eventi

Il codice personalizzato che si attiva solo per un elemento DOM specifico crea un gestore di eventi. Esistono tre modi in JS per creare un gestore di eventi:

1. Gestore di eventi HTML standard tramite attributi

Il metodo più antico di associazione degli eventi, uno dei più utilizzati finora. Il metodo utilizza attributi speciali nel markup. Per esempio:

< input type = "text" id = "username" onblur = "checkName()" >

Nell'esempio sopra, dopo che il campo riceve lo stato attivo e l'utente procede a compilare il campo successivo (ad esempio, utilizzando TAB o un normale clic), l'elemento chiamerà la funzione checkName, che è scritta in JS.
I gestori di eventi HTML standard non sono consigliati per l'uso nello sviluppo moderno, principalmente a causa del fatto che la funzionalità è mischiata con il markup, il che rende difficile lavorare ed eseguire il debug del codice.

2. Gestori di eventi standard nel DOM

Questa tecnica separa JS e markup, ma ha la stessa limitazione: solo una funzione può essere assegnata agli eventi. L'equivalente HTML di un gestore di eventi nel DOM sarebbe:

var username = document.getElementbyId ("nome utente"); username.onblur = checkName;

nome utente. onblur = checkName;

JavaScript. Avvio veloce

Impara le basi di JavaScript con un esempio pratico di creazione di un'applicazione web

Come nell'esempio precedente, la funzione checkName viene eseguita dopo che l'elemento del form perde lo stato attivo.

3. Ascoltatori di eventi

Un metodo moderno per aggiungere un gestore di eventi, che consente di concatenare più eventi e funzioni:

var username = document.getElementbyId ("nome utente"); username.addEventListener ("blur", checkName, false);

var nome utente = documento. getElementbyId ("nome utente"); nome utente. addEventListener ("blur", checkName, false);

Il valore booleano alla fine indica se acquisire l'evento. Di solito impostato su false. Negli script semplici, un evento viene spesso scritto come una funzione anonima:

var username = document.getElementbyId ("nome utente"); username.addEventListener ("sfocatura", funzione () (// azioni per attivare l'evento))

Non tutti gli eventi sono uguali È importante capire che non tutti gli eventi possono essere gestiti allo stesso modo. Gli eventi di scorrimento e ridimensionamento vengono attivati ​​molto spesso, motivo per cui è necessario prestare molta attenzione per non rallentare le prestazioni dello script. Lo stesso vale per eventi di input apparentemente innocui. Le prestazioni dello script possono essere gravemente ridotte se tenta di rispondere costantemente all'evento di input attivato di frequente sul dispositivo di scorrimento dell'intervallo. Non tutti gli eventi vengono tracciati Gli osservatori di mutazioni attualmente non possono tenere traccia di tutte le modifiche a tutti gli elementi della pagina. Ad esempio, non è possibile tenere traccia della modifica dell'altezza di un elemento (quando il contenitore si riduce in responsive design, il testo al suo interno si riorganizza e gli elementi si allungano). Ci sono ancora modi per tenere traccia delle modifiche, ne parlerò nel prossimo articolo. Collega gli eventi agli elementi corretti L'evento onclick si applica a molti elementi, inclusi i collegamenti. Esiste una regola generale: non è consigliabile allegare codice JS ai collegamenti. Facendo clic sul collegamento, l'utente dovrebbe passare a un'altra area del sito o a un'ancora. Se hai bisogno di un elemento dell'interfaccia utente che può essere utilizzato per modificare qualcosa nella stessa pagina, il pulsante fa per te. Puoi appendere JavaScript sul pulsante senza problemi. Non usare JavaScript se puoi farlo con i CSS Rispetto ai CSS, JavaScript è lento e inaffidabile. Fondamentalmente, i CSS dovrebbero essere usati come alternativa agli script complessi ove possibile. Tuttavia, i CSS non fanno tutto. Fa un buon lavoro con: hover (sostituisce gli eventi di tocco in molti casi) e può anche sostituire gli eventi di clic con: target in alcuni casi. Le animazioni CSS vengono attivate automaticamente dopo il caricamento della pagina e ci sono stati CSS speciali che possono essere attivati ​​per elementi come i pulsanti di opzione. Tuttavia, di solito è meglio lasciare qualcosa di più complesso a JavaScript.

Mentre lavora con la pagina, l'utente esegue varie azioni: fa clic sui pulsanti del mouse, inserisce il testo sulla tastiera. Ciascuna di queste azioni è un evento del browser. Può essere tracciato ed eseguito da alcune righe del programma quando si verificano. JavaScript ha gestori di eventi per questo. Oltre alle azioni dell'utente, ci sono altri eventi del browser come il caricamento dell'intera pagina.

Ogni evento ha il suo nome. clic è una pressione del pulsante sinistro del mouse, keydown è una pressione di un tasto, focus è il focus di un elemento del modulo,

Gestione degli eventi

Viene chiamata la funzione che viene eseguita quando viene attivato un evento gestore di eventi... Ogni tipo di evento ha il proprio gestore. Il nome del gestore è costituito dalla parola on e dal nome dell'evento. Ad esempio, il gestore dell'evento click si chiama onclick. Gli eventi non accadono sulla pagina in generale, ma su un elemento specifico. Di conseguenza, il gestore non è una funzione separata. Il gestore è posizionato su un elemento della pagina.

Esistono diversi modi per assegnare un gestore di eventi a un elemento. Puoi assegnare un gestore tramite l'attributo tag. Il codice da eseguire quando viene attivato l'evento è scritto nel valore dell'attributo. Creiamo una pagina, aggiungiamo un pulsante e le assegniamo un gestore di eventi click:

1 2 3 4 5 6 7

JavaScript:

JavaScript:

17 18 19 20 21 22

var inform = function () (avviso ("Un altro pulsante");); var mbutton = document.getElementById ("mbutton"); mbutton.onclick = informa;

Quando una funzione viene assegnata a un gestore, non ci sono parentesi dopo il nome della funzione. Se metti le parentesi, allora non sarà un'assegnazione di funzione, ma una chiamata per l'esecuzione.

Esiste un metodo addEventListener() che assegna anche un gestore eventi a un elemento. È considerato più moderno. Non viene utilizzato molto spesso ora, ma ci sono nuovi eventi in JavaScript che possono essere gestiti solo utilizzando questo metodo.

element.addEventListener (evento, funzione)

Opzioni:

evento - un evento che deve essere elaborato

funzione - una funzione che diventa un gestore

Nei parametri di questo metodo, il nome dell'evento è scritto tra virgolette e non è necessario scrivere la parola prima di esso.

Codice HTML:

Nuovo pulsante

JavaScript:

24 25 26 27 28 29

var newinform = function() (avviso ("Nuovo pulsante premuto");); var nuovopulsante = document.getElementById ("nuovopulsante"); newbutton.addEventListener ("click", newinform);

Il metodo removeEventListener() consente di rimuovere un gestore.

element.removeEventListener (evento, funzione)

Utilizzando il metodo considerato, a un elemento possono essere assegnati più gestori per lo stesso evento. Quindi è necessario eliminare ciascuno di essi separatamente.

Oggetto evento

Ogni volta che viene attivato un evento, viene generato un oggetto evento. L'oggetto contiene informazioni sull'evento. Diversi tipi di eventi hanno oggetti diversi. Ma ci sono anche proprietà che ogni oggetto ha. Ad esempio, la proprietà type contiene il tipo dell'evento.

L'oggetto evento viene passato come parametro alla funzione che è il gestore. Per accedere all'oggetto, è necessario creare un parametro nella funzione. Questo parametro viene utilizzato per fare riferimento all'oggetto. Se la funzione richiede anche altri parametri, l'oggetto evento deve essere il primo parametro. Cambiamo il gestore per il pulsante con l'id uguale a "pulsante". Otteniamo l'accesso all'oggetto evento. Invece di un messaggio sulla pressione del pulsante, mostreremo il tipo di evento. Ora il gestore sarà simile a questo:

13 14 15 16

button.onclick = function (event) (alert (event.type););

Fare clic sul pulsante, verrà visualizzato il tipo di evento attivato.

Tutti gli oggetti evento hanno una proprietà currentTarget. Restituisce l'elemento che ha attivato l'evento. Questo può sembrare inutile. Dopotutto, il gestore è assegnato a un elemento specifico. Perché restituire di nuovo questo elemento? Ma con gli eventi del browser, le cose sono un po' più complicate. Imparerai come viene utilizzato un po 'più tardi. Considereremo altre proprietà quando studieremo eventi specifici.

Tipi di eventi

All'alba dello sviluppo del World Wide Web, gli sviluppatori web hanno dovuto affrontare solo un piccolo numero di eventi: "carica", "clic", "passa il mouse" e altri. Questi tipi di eventi abbastanza vecchi sono ben supportati da tutti i browser. Con l'evoluzione della piattaforma web, sono state incluse API più potenti e il numero di eventi è aumentato in modo significativo. Non esiste uno standard che definisca un set completo di eventi e il numero di eventi supportati continua a crescere rapidamente. Questi nuovi eventi sono identificati nelle seguenti due fonti:

La specifica DOM Level 3 Events, che, dopo molti anni di stagnazione, ha iniziato a essere attivamente sviluppata sotto gli auspici del consorzio W3C.

Molte delle nuove API nella specifica HTML5 (e relative specifiche aggiuntive) definiscono nuovi eventi utilizzati, ad esempio, per gestire la cronologia, trascinare e rilasciare, scambiare messaggi tra documenti e riprodurre audio e video.

Si noti che molti di questi nuovi tipi di eventi non sono ancora ampiamente supportati e sono definiti da standard ancora in fase di progettazione. Gli eventi che utilizzerai più spesso nelle tue applicazioni web di solito rientrano nella categoria di lunga data e supportati da tutti i browser: sono eventi per lavorare con il mouse, la tastiera, i moduli HTML e l'oggetto Window. Prenderemo in considerazione questi eventi.

Eventi di caricamento del documento

La maggior parte delle applicazioni Web ha assolutamente bisogno del browser Web per notificarle quando il documento ha terminato il caricamento ed è pronto per eseguire operazioni su di esso. Questo scopo è servito dall'evento carico nell'oggetto Finestra. L'evento load viene generato solo dopo che il documento e tutte le sue immagini sono state completamente caricate. Tuttavia, gli script di solito possono essere eseguiti subito dopo che il documento è stato analizzato, prima che le immagini vengano caricate. È possibile ridurre significativamente il tempo di avvio di un'applicazione Web avviando lo scripting su eventi diversi dal caricamento.

Evento DOMContentLoaded attivato non appena il documento è stato caricato, analizzato dal parser e tutti gli script posticipati sono stati eseguiti. A questo punto, le immagini e gli script con l'attributo asincrono possono continuare a essere caricati, ma il documento stesso sarà pronto per eseguire le operazioni. Questo evento è stato introdotto per la prima volta in Firefox e da allora è stato adottato da tutti gli altri produttori di browser, inclusa Microsoft, che ha aggiunto il supporto per questo evento in IE9. Nonostante il prefisso DOM nel nome, questo evento non fa parte dello standard DOM Level 3 Events, ma è standardizzato dalla specifica HTML5.

Durante il caricamento del documento, il valore della proprietà document.readyState cambia. Ogni modifica al valore di questa proprietà in IE è accompagnata da un evento readystatechange sull'oggetto Document, quindi in IE questo evento può essere utilizzato per determinare quando si verifica lo stato completo. La specifica HTML5 standardizza l'evento readystatechange, ma indica di attivarlo immediatamente prima dell'evento load, quindi non è del tutto chiaro quale sia il vantaggio dell'evento readystatechange sul carico.

L'esempio seguente definisce la funzione whenReady(). La funzione passata a whenReady() viene chiamata (come metodo dell'oggetto Document) non appena il documento è pronto per eseguire operazioni. whenReady() ascolta gli eventi DOMContentLoaded e readystatechange e utilizza l'evento load solo come fallback nel caso venga utilizzato in browser meno recenti che non supportano i primi due eventi. La funzione whenReady() verrà utilizzata in alcuni dei seguenti scenari:

/ * Passa la tua funzione a whenReady() e la chiamerà (come metodo dell'oggetto documento) non appena il documento sarà analizzato e pronto per eseguire operazioni. Le funzioni registrate vengono chiamate al primo evento DOMContentLoaded, readystatechange o load. Una volta che il documento è pronto e tutte le funzioni vengono chiamate, whenReady() chiamerà immediatamente tutte le funzioni che gli sono state passate. * / var whenReady = (function () (// Questa funzione viene restituita dalla funzione whenReady () var funcs =; // Funzioni da chiamare all'evento var ready = false; // Diventa vero quando viene chiamata la funzione del gestore / / Gestore di eventi , che viene chiamato non appena il documento // è pronto per eseguire operazioni gestore di funzione (e) (// Se il gestore è già stato chiamato, restituisci semplicemente il controllo se (pronto) return; // Se questo evento è readystatechange e lo stato è // eccellente da "completo", il che significa che il documento non è ancora pronto se (e.type === "readystatechange" && document.readyState! == "completo") return; // Chiama tutti i registrati funzioni. // Nota che ogni valore della // proprietà funcs.length viene controllato una volta, nel caso in cui una delle funzioni chiamate // registri funzioni aggiuntive.for (var i = 0; i

Eventi del mouse

Ci sono alcuni eventi associati al mouse. Sono tutti elencati nella tabella sottostante. Tutti gli eventi del mouse eccetto mouseenter e mouseleave vengono visualizzati. Gli eventi di clic sui collegamenti e i pulsanti di invio del modulo hanno azioni predefinite che possono essere annullate. È teoricamente possibile annullare l'evento del menu di scelta rapida e impedire la visualizzazione del menu di scelta rapida, ma alcuni browser hanno impostazioni che rendono questo evento non annullabile.

Eventi del mouse JavaScript

Tipo di	Descrizione
clic	Un evento di alto livello generato quando l'utente preme e rilascia un pulsante del mouse o attiva in altro modo un elemento.
menù contestuale	Un evento annullabile che viene generato prima che venga visualizzato il menu di scelta rapida. I browser attuali visualizzano un menu di scelta rapida facendo clic con il pulsante destro del mouse, quindi questo evento può essere utilizzato anche come evento clic.
dblclick	Attivato quando l'utente fa doppio clic.
mousedown	Attivato quando l'utente preme il pulsante del mouse.
mouseup	Attivato quando l'utente rilascia il pulsante del mouse.
mossa del mouse	Generato quando l'utente sposta il puntatore del mouse.
passaggio del mouse	Sollevato quando il puntatore del mouse è posizionato su un elemento. La proprietà relatedTarget (o fromElement in IE) identifica l'elemento da cui è stato spostato il puntatore del mouse.
toglie il mouse	Sollevato quando il puntatore del mouse lascia l'elemento. La proprietà relatedTarget (o toElement in IE) specifica l'elemento su cui è stato spostato il puntatore del mouse.
mouseenter	Simile al passaggio del mouse, ma non compare. È apparso per la prima volta in IE ed è stato standardizzato in HTML5, ma non ancora supportato da tutti i browser.
mouselascia	Come mouseout, ma non compare. È apparso per la prima volta in IE ed è stato standardizzato in HTML5, ma non ancora supportato da tutti i browser.

L'oggetto passato ai gestori di eventi del mouse ha proprietà clienteX e clienteY che definiscono le coordinate del puntatore relative alla finestra. Per convertirli in coordinate del documento, è necessario aggiungere loro le posizioni della barra di scorrimento della finestra.

Proprietà tasto alt, ctrlKey, metaKey e tasto delle maiuscole definire gli stati dei vari tasti modificatori che possono essere stati tenuti premuti al momento dell'evento: possono essere utilizzati per distinguere un semplice clic da un clic con il tasto Maiusc premuto, ad esempio.

Proprietà pulsante determina quale pulsante del mouse è stato tenuto premuto al momento dell'evento. Tuttavia, browser diversi scrivono valori diversi su questa proprietà, quindi è difficile utilizzarla in modo portatile.

Alcuni browser generano l'evento click solo quando si fa clic sul pulsante sinistro. Pertanto, se è necessario gestire i clic di altri pulsanti, è necessario utilizzare gli eventi mousedown e mouseup. L'evento contextmenu di solito segnala che è stato eseguito un clic con il pulsante destro del mouse, ma come notato sopra, non è sempre possibile impedire la visualizzazione del menu contestuale nei gestori di questo evento.

L'esempio seguente mostra una funzione drag() che, quando viene chiamata da un gestore di eventi mousedown, consente all'utente di trascinare con il mouse elementi del documento posizionati in modo assoluto. La funzione drag() funziona con entrambi i modelli di eventi, DOM e IE.

La funzione drag() accetta due argomenti. Il primo è l'elemento che viene trascinato. Questo potrebbe essere l'elemento che ha generato l'evento mousedown e l'elemento che lo contiene (ad esempio, potresti lasciare che l'utente prenda un elemento che assomiglia al titolo di una finestra e trascini l'elemento contenitore che assomiglia a una finestra). Tuttavia, in ogni caso, deve essere un elemento del documento posizionato in modo assoluto utilizzando l'attributo position CSS. Il secondo argomento è l'oggetto evento ricevuto con l'evento mousedown:

/ * drag() - trascina e rilascia elementi HTML posizionati in modo assoluto. Questa funzione deve essere chiamata dal gestore di eventi onmousedown. I successivi eventi mousemove faranno spostare l'elemento specificato. L'evento mouseup completerà lo spostamento. Questa implementazione funziona sia nei modelli di eventi standard che in IE. Utilizza la funzione getScrollOffsets(). Argomenti elementToDrag: l'elemento che ha ricevuto o contiene l'evento mousedown. Questo elemento deve essere assolutamente posizionato. I valori delle sue proprietà style.left e style.top cambieranno quando l'utente sposta il puntatore del mouse. event: l'oggetto Event ricevuto dal gestore dell'evento mousedown. * / function drag (elementToDrag, event) (// Converti le coordinate iniziali del mouse in coordinate del documento var scroll = getScrollOffsets (); // La funzione di supporto dichiarata sotto var startX = event.clientX + scroll.x; var startY = event.clientY + scroll.y; // Le coordinate iniziali (relative all'inizio del documento) dell'elemento che // verrà spostato.Poiché elementToDrag è posizionato in modo assoluto, // si presume che la sua proprietà offsetParent faccia riferimento al documento body var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // Trova la distanza tra il punto dell'evento mousedown e l'angolo superiore sinistro dell'elemento. // Questa distanza verrà presa in considerazione quando si sposta il puntatore del mouse.var deltaX = startX - origX; var deltaY = startY - origY; // Registra i gestori degli eventi mousemove e mouseup // che seguono l'evento mousedown.if (document.addEventListener) (// Modello di evento standard // Registra intercettazione dei gestori nel documento document.addEventListener ("mousemove", moveHandler, true); document.addEventListener ("mouseup", upHandler, true); ) else if (document.attachEvent) (// Modello di eventi IE per IE5-8 // Nel modello di eventi IE, gli eventi vengono intercettati chiamando // il metodo setCapture () dell'elemento. elementToDrag.setCapture (); elementToDrag. attachEvent ("onmousemove", moveHandler); elementToDrag.attachEvent ("onmouseup", upHandler); // Interpreta la perdita dell'acquisizione dell'evento del mouse come un evento mouseup elementToDrag.attachEvent ("onlosecapture", upHandler);) // Questo evento è stato gestito e non deve essere passato ad altri gestori if (event .stopPropagation) event.stopPropagation (); // Modello standard else event.cancelBubble = true; // IE // Impedisce l'esecuzione delle azioni predefinite. if (event.preventDefault) event.preventDefault (); // Modello standard else event.returnValue = false; // IE / * Questo gestore cattura gli eventi di spostamento del mouse che si verificano mentre un elemento viene trascinato. È responsabile dello spostamento dell'elemento. * / function moveHandler (e) (if (! e) e = window.event; // IE Event Model // Sposta l'elemento nella posizione del mouse in base alle // posizioni della barra di scorrimento e agli offset relativi allo scroll iniziale di click.var = getScrollOffsets ( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; / / E abort propaga ulteriormente l'evento if (e.stopPropagation) e.stopPropagation (); // Modello standard else e.cancelBubble = true; // IE) / * Questo gestore intercetta l'evento mouseup finale che completa l'operazione di trascinamento. * / function upHandler (e) (if (! e) e = window.event; // IE Event Model // Rimuove i gestori di eventi di intercettazione. if (document.removeEventListener) (// DOM Event Model document.removeEventListener ("mouseup" , upHandler, true); document.removeEventListener ("mousemove", moveHandler, true);) else if (document.detachEvent) (// Modello evento IE 5+ elementToDrag.detachEvent ("onlosecapture", upHandler); elementToDrag.detachEvent ( "onmouseup", upHandler); elementToDrag.detachEvent ("onmousemove", moveHandler); elementToDrag.releaseCapture ();) // E interrompe l'ulteriore propagazione dell'evento. if (e.stopPropagation) e.stopPropagation (); // Standard model else e.cancelBubble = true; // IE)) // Restituisce le posizioni correnti della barra di scorrimento come proprietà x e y della funzione oggetto getScrollOffsets (w) (// Utilizza la finestra specificata o quella corrente, // se il la funzione viene chiamata senza un argomento w = w | | window; // Il seguente metodo funziona in tutti i browser tranne IE versione 8 e sotto if (w.pageXOffset! = null) return (x: w.pageXOffset, y: w.pageYOffset); // Per IE (e altri browser) in modalità standard var d = w.document; if (document.compatMode == "CSSICompat") return (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Per i browser in modalità compatibilità return (x: d.body.scrollLeft, y: d.body.scrollTop); )

Il seguente frammento mostra come utilizzare la funzione drag() in un file HTML:

Il più importante qui è l'attributo onmousedown sull'elemento annidato