Introduzione agli eventi HTML
HyperText Markup Language (HTML) è un linguaggio ipertestuale che crea un web design. è mostrato su qualsiasi browser web. Eventi HTML è azione. ogni utente click ottiene una reazione da un browser chiamato Action. Questo processo è noto come Evento.
Supponiamo che la pagina Web abbia un modulo, l'utente compili questo modulo, quindi l'utente riceve due chiavi, una viene inviata e l'altra viene annullata. Quando gli utenti premono il pulsante di invio, i dati del modulo verranno salvati. Sul pulsante Annulla, annulla i dati del modulo e aggiorna nuovamente il modulo. Questa azione pulsante chiamata evento. questo evento dipende dalle azioni degli utenti.
Diversi tipi di eventi HTML
Ci sono molti attributi di eventi disponibili in HTML5, che sono classificati principalmente in 6 diversi tipi. Questi attributi funzionano usando il linguaggio JavaScript.
- Attributi evento di Windows: viene fornito per l'azione dell'oggetto Windows. Funziona in body tag.
- Attributi dell'evento modulo: se l'utente esegue un'azione nel modulo come i dati di input, annulla, invia quindi questi attributi dell'evento funzionano.
- Attributi degli eventi della tastiera: questi attributi degli eventi della tastiera utilizzati per l'azione della tastiera e l'interazione dell'utente.
- Attributi dell'evento del mouse : attributo dell'evento del mouse utilizzato per l'azione del mouse che è mossa, clic, ruota, ecc.
- Attributi evento degli Appunti: attributi di questo evento utilizzati per l'azione degli Appunti. Esempio taglia, copia, peste.
- Attributi dell'evento multimediale: questo attributo dell'evento funziona su file multimediali come video ecc.
Descrizione degli attributi dell'evento
Ecco una spiegazione degli attributi dell'evento che sono riportati di seguito in dettaglio:
1. Attributi degli eventi di Windows
|
Attributo |
Descrizione |
| OnAfterPrint | Questo atto di sceneggiatura, sebbene dopo la stampa del documento. |
| OnBeforePrint | Questo atto di sceneggiatura, sebbene prima di un documento stampato. |
| onbeforeunload | Considerando che prima del documento scaricato, questo script funziona. |
| onerror | Nel documento si verifica l'errore, quindi questo evento eseguito. |
| onhashchange | La parte di ancoraggio dell'URL cambia nel documento che l'evento temporale è stato eseguito. |
| onload | Quando la prima pagina Web viene caricata completamente, questo evento viene eseguito. |
| onMessage | Nel documento, il messaggio si è verificato in quel momento evento eseguito. |
| onoffline | Se la connessione di rete non è disponibile e il browser dice offline, l'evento viene eseguito. |
| ononline | Quando la rete è disponibile nel browser, l'evento viene eseguito. |
| onpagehide | Questo script agisce, se l'utente non lavora su una pagina Web corrente, la pagina corrente può essere nascosta. |
| onpageshow | Questo script agisce in quel momento quando viene caricata la pagina Web corrente. |
| onpopstate | Questo script funziona automaticamente sul browser per un cambio di stato della cronologia. |
| onResize | Questo script agisce quando il browser della finestra cambia la dimensione. |
| onstorage | Quando la memoria Web degli utenti viene aggiornata, viene eseguito l'evento. |
| onunload | La pagina Web corrente dell'utente non viene caricata oppure la finestra viene chiusa, quindi l'evento viene eseguito. |
2. Attributi dell'evento modulo
| Attributo | Descrizione |
| sfocato | Alcuni oggetti di convalida del modulo perdono lo stato attivo, quindi l'evento viene generato. |
| onchange | Il valore cambia nel modulo quindi viene generato l'evento. |
| onfocus | Nella forma, l'oggetto ha lo stato attivo. Lavorando su questo oggetto, quindi l'evento è stato generato. |
| oninput | L'utente fornisce input di valore nel modulo, quindi questo evento viene generato. |
| oninvalid | L'evento funziona quando l'elemento non soddisfa i suoi vincoli predefiniti. |
| onreset | L'utente reimposta le informazioni sul modulo, quindi l'evento viene generato. |
| onsearch | Gli utenti effettuano la ricerca nel campo richiesto, quindi l'evento viene generato. |
| onselect | L'utente seleziona il testo o l'area di testo nel modulo, quindi l'evento generato. |
| onSubmit | L'utente invia il modulo alla fine, quindi l'evento è stato generato. |
3. Attributi degli eventi della tastiera
| Attributo | Descrizione |
| onKeyDown | Usando una tastiera, l'utente preme il tasto giù in quel momento, l'evento funziona |
| onkeypress | Usando la tastiera, gli utenti premono il tasto e visualizzano i caratteri in quel momento l'evento funziona. |
| onKeyUp | Dopo la pressione, l'utente chiave rilascia la chiave quindi l'evento funziona. |
4. Attributi dell'evento del mouse
| Attributo | Descrizione |
| al clic | L'utente fa clic con il mouse sul pulsante quindi si è verificato un evento. |
| ondblclick | Gli utenti fanno doppio clic con il mouse, quindi si è verificato l'evento. |
| onmousedown | L'utente preme il pulsante del mouse sull'elemento quindi si è verificato l'evento. |
| onMouseMove | L'utente sposta il puntatore del mouse sull'elemento, quindi si è verificato l'evento. |
| onmouseout | L'utente sposta il mouse all'esterno dell'elemento quindi si è verificato l'evento. |
| onmouseover | L'utente sposta il mouse sull'elemento, quindi si è verificato l'evento. |
| onmouseup | L'utente ha rilasciato il pulsante del mouse quindi si è verificato l'evento. |
| OnMouseWheel | Usando la rotellina del mouse l'utente ruota su e giù sull'elemento, quindi si è verificato l'evento. |
| onwheel | Utilizzando un utente della rotellina del mouse, ruotarli su e giù, quindi si è verificato l'evento. |
5. Attributi degli eventi degli Appunti
| Attributo | Descrizione |
| oncopy | Utilizzando gli utenti del mouse per copiare il contenuto, si è verificato l'evento. |
| oncut | Utilizzando gli utenti del mouse tagliare il contenuto, si è verificato l'evento. |
| onpaste | Utilizzando l'utente del mouse incollare il contenuto quindi si è verificato l'evento. |
6. Attributi degli eventi multimediali
| Attributo | Descrizione |
| OnAbort | Quando i file multimediali vengono interrotti per il download e la riproduzione, si verifica un evento. |
| oncanplay | Quando un file multimediale è pronto per la riproduzione, questo trigger viene attivato. |
| oncanplaythrough | File multimediale pronto per la riproduzione senza buffering e caricamento. |
| oncuechange | L'elemento cambia l'indicazione dell'evento generato. |
| ondurationchange | Il file multimediale modifica il periodo di tempo, quindi viene attivato il trigger. |
| onemptied | Se il file multimediale non è disponibile e viene visualizzato un errore irreversibile, il trigger viene attivato. |
| onended | Il file multimediale arriva all'endpoint quindi viene attivato il trigger. |
| onerror | Quando si è verificato un errore per ottenere il file multimediale, viene attivato il trigger |
| onloadeddata | Il file multimediale carica i dati, quindi viene attivato il trigger. |
| onloadedmetadata | Il file multimediale carica i metadati, quindi viene attivato il trigger. |
| gestore di eventi onLoadStart | Il file multimediale inizia a caricarsi, quindi viene attivato il trigger. |
| OnPause | Il file multimediale è stato messo in pausa per essere riprodotto di nuovo, quindi viene attivato il trigger. |
| onplay | Il file multimediale pronto per la riproduzione, quindi viene attivato il trigger. |
| onplaying | Il file multimediale inizia a essere riprodotto, quindi viene attivato il trigger. |
| onProgress | Questo script agisce quando il browser sta lavorando alla connessione con i dati multimediali. |
| onratechange | Se la velocità di riproduzione dei video viene modificata, viene attivato il trigger. |
| onseeked | Gli utenti hanno completato lo spostamento, altrimenti salta la nuova posizione del video. questo attributo impostato come falso. |
| onseeking | L'utente vuole spostarsi altrimenti salta la nuova posizione del video. questo attributo impostato come vero. |
| onstalled | Quando il browser si interrompe improvvisamente alla connessione dei dati, l'evento funziona. |
| onsuspend | Quando il browser Web di proposito non ottiene i dati multimediali, gli eventi funzionano. |
| ontimeupdate | Quando un utente cambia la posizione di riproduzione del video come avanti e indietro. |
| onvolumechange | Per modificare il volume dei supporti da basso ad alto. |
| onwaiting | Se i dati caricano le informazioni, il video corrente si interrompe con il buffering, quindi l'evento funziona. |
Conclusione
Gli eventi HTML sono un modo semplice per agire e interfacciarsi tra browser Web e utenti. Gli utenti possono ottenere la reazione di ogni azione senza sforzo. Per esempio; taglia e copia per gli appunti, sposta e fai clic per il mouse, pulsanti per il modulo. Gli eventi rendono le applicazioni Web in tempo reale e creano sistemi di lavoro intelligenti.
Articoli consigliati
Questa è una guida agli eventi HTML. Qui discutiamo dell'introduzione e dei tipi di eventi HTML come windows, form, tastiera e molti altri insieme alla spiegazione degli attributi in dettaglio. Puoi anche consultare i seguenti articoli per saperne di più-
- Tag HTML di base
- Vantaggi dell'HTML
- Tag di formato HTML
- Fogli di stile HTML
- Blocchi HTML
- Primi 5 attributi di eventi HTML con esempi
- Imposta un colore di sfondo in HTML con Esempio
- Guida a diversi eventi JavaScript
- Convalida del modulo HTML | Esempi