Breve analisi dell'uso degli eventi in JavaScript

Questo articolo fornisce un esempio di utilizzo degli eventi JavaScript. Condividiamo questo con tutti voi per riferimento, come segue:

JavaScript interagisce con HTML attraverso gli eventi.

Flusso degli eventi

Il flusso degli eventi definisce le regole e l'ordine di attivazione degli eventi. DOM2 specifica che il flusso degli eventi include tre fasi: cattura degli eventi -> attivazione degli eventi sul target -> propagazione degli eventi. DOM2 stabilisce che non dovrebbe essere chiamato il gestore degli eventi durante la fase di cattura degli eventi, ma i principali browser non danno troppo peso a questa regola. Le funzioni di gestione degli eventi del livello DOM2: addEventListener e removeEventListener, trasformano questa situazione in un'operazione DIY, che è una compromissione e induce i principianti a pensare che la gestione del DOM sia in disordine.

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);

Aggiornare il terzo parametro di addEventListener e removeEventListener nei js sopra indicati a true, confrontato con false, può far capire meglio il flusso degli eventi.

Eventi

Gli eventi sono azioni eseguite dall'utente o dal browser.

Modi per aggiungere gestori di eventi

Le funzioni che rispondono agli eventi sono chiamate gestori di eventi.

Ecco come specificare un gestore di eventi:

Specificazione delle proprietà HTML.

Se un elemento supporta un evento, esiste una corrispondente proprietà HTML, che può essere utilizzata per aggiungere un gestore di eventi.

<button id="btn" onclick="alert('click pulsante')">pulsante</button>

DOM0 livello. Assegnare una funzione a un attributo gestore di eventi di un elemento: questo è il modo tradizionale di specificare un gestore di eventi in JavaScript, che viene ancora utilizzato oggi.

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="pulsante";

DOM2 livello.

Gestire gli eventi degli elementi tramite addEventListener e removeEventListener. Tutti gli elementi DOM contengono questi metodi, che entrambi accettano tre parametri; prendiamo ad esempio add:

addEventListener(nome_evento, funzione_gestore_evento, eseguire_gestore_prima_della_cattura)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//Attenzione, il seguente remove non serve; queste due funzioni anonime sono oggetti diversi
btn.removeEventListener("click",function(){alert(this.id);},true);

Nella codice riportato sopra, riferimenti a oggetti identici sono considerati come identici; la stessa dichiarazione genera due oggetti con lo stesso aspetto ma memorizzati in due posizioni diverse sulla pila.

Oggetto evento

Quando un evento viene scatenato sul DOM, viene generato un oggetto evento event. Qualsiasi gestore di evento specificato passerà l'oggetto evento: esattamente, l'oggetto evento viene creato nell'ambiente di esecuzione della funzione chiamata e, in base alla definizione della catena di scope, si può sapere come viene passato.

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);

btn.onclick = btnClick; // Quando si clicca sul pulsante btn, viene visualizzato msg: click

L'evento contiene membri ricchi, utilizzati per controllare l'accesso all'evento; di seguito sono elencati i membri comuni a tutti gli eventi.

target: l'elemento diretto colpito dall'azione che scatena l'evento.
currentTarget: uguale a this, l'elemento su cui agisce il programma di gestione degli eventi.
eventPhase: il阶段 nel flusso di eventi in cui viene chiamato il programma di gestione degli eventi. I valori 1, 2, 3 corrispondono ai tre stadi del flusso di eventi.
type: tipo di evento. L'evento di clic corrisponde a String: "click".

Tipi di evento

I tipi di eventi sono suddivisi nelle seguenti categorie:

Eventi UI.
Eventi di fuoco.
Eventi del mouse e della rotellina.
Eventi di tastiera e testo.
Eventi complessi.
Eventi di variazione.
Eventi HTML5.
Eventi di dispositivo.
Eventi di tocco e gesture.

PS: Per una descrizione dettagliata degli eventi JavaScript, è possibile consultare gli strumenti online di questo sito:

Manuale completo di eventi e funzioni JavaScript:
http://tools.jb51.net/table/javascript_event

Per chi è interessato a ulteriori contenuti su JavaScript, è possibile consultare le sezioni speciali di questo sito: 'Riassunto delle operazioni e delle tecniche di finestra JavaScript', 'Riassunto delle tecniche di manipolazione JSON in JavaScript', 'Riassunto delle tecniche e delle技巧 di effetto di transizione JavaScript', 'Riassunto delle tecniche di ricerca algoritmo JavaScript', 'Riassunto delle tecniche e delle技巧 di animazione JavaScript', 'Riassunto delle tecniche di debug e delle技巧 di errore JavaScript', 'Riassunto delle tecniche di struttura dati e algoritmo JavaScript', 'Riassunto delle tecniche di ricerca e delle技巧 di algoritmo JavaScript', e 'Riassunto delle tecniche di calcolo matematico JavaScript'.

Spero che l'articolo descritto possa essere utile per la progettazione di programmi JavaScript di tutti.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale pertinente. Se trovi contenuti sospetti di violazione del copyright, è possibile inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente i contenuti sospetti di violazione del copyright.