English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propagazione degli eventi è un metodo per descrivere lo 'stack' degli eventi attivati in un browser web.
l'eventoBolleeCatturaci sono due meccanismi di propagazione degli eventi, che descrivono ciò che accade quando due programmatore attivano due gestori di eventi dello stesso tipo su un elemento.
Supponiamo che tu stia<div >all'interno dell'elemento c'è un<p>l'elemento, e l'utente ha fatto clic su<p>Quale elemento, dovrebbe essere trattato per primo per l'evento 'click'?
<div id="div1">Capturing
<p id="p1">Clicca su di me</p>
</div>
<script>
document.querySelector("#div1").addEventListener("click", myFunc, true);
document.querySelector("#p1").addEventListener("click", myFunc, true);
</script>Prova a vedere‹/›Throughcapture( intercettare )L'evento viene prima catturato e propagato all'interno degli elementi più esterni.
ThroughBolle, l'evento viene prima catturato e trattato dall'elemento più interno, poi propagato agli elementi esterni.
Utilizzando iladdEventListener()Metodo, è possibile utilizzare " useCapture I parametri specificano il tipo di propagazione, di seguito è illustrato in dettaglio la sintassi di useCapture.
element.addEventListener(event, listener, useCapture)
Il valore predefinito di "useCapture" è false, che utilizza per default la propagazione di bolle; mentre impostando il valore su true, l'evento utilizza la propagazione di cattura.
L'introduzione del concetto di propagazione degli eventi è stata introdotta per gestire la situazione in cui più elementi con relazione padre-figlio nella gerarchia DOM hanno gestori degli eventi per lo stesso evento (ad esempio, clic del mouse). Il problema attuale è quale evento di clic dell'elemento viene trattato per primo quando l'utente clicca sull'elemento interno, ovvero l'evento di clic dell'elemento esterno o quello dell'elemento interno.
Quando viene attivato un evento su un elemento con elementi genitori (ad esempio, nell'esempio di questo esempio)<p>), il browser esegue due fasi diverse - la fase di cattura e la fase di bolle.
InCatturaFase:
Il browser verifica il più esterno elemento genitore dell'elemento (<html>se è stato registrato un gestore degli eventi onclick nella fase di cattura, esegue il gestore degli eventi.
Poi, si sposta ain <html>e esegue la stessa operazione, poi esegue il successivo, e così via, fino a raggiungere l'elemento effettivamente cliccato.
InBolleFase opposta:
Il browser verifica se l'elemento effettivamente cliccato durante la fase di bolle ha registrato un gestore degli eventi onclick, se sì, esegue il gestore degli eventi.
Poi, si sposta al successivo elemento genitore diretto e poi esegue il successivo, e così via, fino a raggiungere<html>fino all'elemento.
Negli utenti principali dei browser, per default, tutti i gestori degli eventi sono registrati nella fase di bolle.
Nella fase di cattura, l'evento si propaga dal Window verso il basso attraverso l'albero DOM fino al nodo di destinazione.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);Prova a vedere‹/›Solo quandoaddEventListener()Quando il terzo parametro è impostato su true, la cattura degli eventi viene utilizzata insieme al gestore degli eventi registrato in tempo.
Nella fase di sospensione, esattamente il contrario. In questa fase, l'evento si propaga o sospingerà, dal nodo target al Window, propagandosi verso l'alto dell'albero DOM.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);Prova a vedere‹/›Tutti i browser supportano la propagazione degli eventi e la propagazione degli eventi è applicabile a tutti i gestori, indipendentemente dal modo in cui sono registrati (ad esempio, utilizzando onclick o addEventListener()).
Se si desidera prevenire che l'uso del metodo event.stopPropagation() notifichi ai programmi di gestione degli eventi degli antenati qualsiasi informazione sull'evento, è possibile fermare la propagazione dell'evento a metà strada.
Nell'esempio seguente, se si fa clic su un elemento figlio, non verrà eseguito l'ascoltatore di eventi click sull'elemento genitore:
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("You clicked: " + this.tagName);
event.stopPropagation();
}Prova a vedere‹/›L'elemento target è il nodo DOM che ha generato l'evento.
Ad esempio, se l'utente fa clic su un hyperlink, l'elemento target è l'hyperlink.
Il modo di accedere all'elemento target è event.target, che non cambia durante la fase di propagazione dell'evento.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("target = " + event.target.tagName);
}Prova a vedere‹/›Alcuni eventi hanno azioni predefinite associate. Ad esempio, se fai clic su un link, il browser ti porta al destinatario del link, se fai clic su un pulsante di invio del modulo, il browser invia il modulo, ecc. Puoi utilizzare il metodo event.preventDefault() dell'oggetto evento per prevenire tali azioni predefinite.
function myFunc() {
event.preventDefault();
}Prova a vedere‹/›Ma, bloccare l'azione predefinita non blocca la propagazione dell'evento; l'evento continua a propagarsi normalmente attraverso l'albero DOM.
La propagazione ci permette di sfruttare la delega degli eventi.
La delega degli eventi ti permette di evitare di aggiungere ascoltatori di eventi a un nodo specifico; invece, aggiungi l'ascoltatore di eventi a un oggetto genitore.
Questa concezione si basa sul fatto che se si desidera eseguire determinato codice quando si fa clic su uno qualsiasi degli elementi figli di un numero elevato di elementi, è possibile impostare un ascoltatore di eventi sull'elemento genitore e far sì che gli eventi che si verificano su di essi si propaghino verso l'elemento genitore, senza dover impostare un ascoltatore di eventi per ogni figlio singolarmente.
In questo esempio, se desideri visualizzare un messaggio quando si fa clic, puoi aggiungere un ascoltatore di eventi click al<ul>Imposta un ascoltatore di eventi click, che mostrerà un elemento della lista
<ul id="parent-list">
<li id="post-1">Elemento 1</li>
<li id="post-2">Elemento 2</li>
<li id="post-3">Elemento 3</li>
<li id="post-4">Elemento 4</li>
<li id="post-5">Elemento 5</li>
<li id="post-6">Elemento 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("Elemento lista " + event.target.id.replace("post-", "") + " è stato cliccato!");
}
});
</script>Prova a vedere‹/›