English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propagación de eventos es una manera de describir el "pila" de eventos que se desencadena en el navegador web.
eventoBurbujayCapturason dos mecanismos de propagación de eventos, que describen lo que ocurre cuando se activan dos programas del mismo tipo de evento en un elemento.
asuma que está en<div >elemento hay una<p>elemento, y el usuario hizo clic en<p>elemento, ¿debería manejar primero el evento "click" de qué elemento?
<div id="div1">Capturing
<p id="p1">Click me</p>
</div>
<script>
document.querySelector("#div1).addEventListener("click", myFunc, true);
document.querySelector("#p"}1).addEventListener("click", myFunc, true);
</script>Prueba y observa‹/›A través decaptura(captura)，el evento primero se captura por el elemento más externo y luego se propaga a los elementos internos.
A través deBurbuja，el evento primero se captura y se procesa por el elemento más interno, luego se propaga a los elementos externos.
Usando eladdEventListener()Método, puede usar " useCapture El parámetro especifica el tipo de propagación, a continuación se proporciona una explicación detallada de useCapture.
element.addEventListener(event, listener, useCapture)
"useCapture" tiene el valor predeterminado false, lo que significa que se utilizará la propagación de burbuja por defecto; mientras que al establecer el valor en true, el evento se utilizará la propagación de captura.
La introducción del concepto de propagación de eventos se debe a que hay múltiples elementos con relaciones de padre e hijo en la jerarquía DOM que tienen programas de manejo de eventos para el mismo evento (por ejemplo, clic de ratón). Ahora el problema es, ¿cuál será el evento de clic que se procesará primero cuando el usuario haga clic en el elemento interno, es decir, el evento de clic del elemento externo o el del elemento interno?.
Cuando se desencadena un evento en un elemento con elementos padre (por ejemplo, en este ejemplo,<p>），el navegador ejecutará dos fases diferentes-Fases de captura y burbuja.
EnCapturaFase:
El navegador verificará el elemento de nivel superior más externo (<html>¿está registrado el programa de manejo de eventos onclick en la fase de captura, y si es así, ejecuta el programa de manejo de eventos.
Luego, se mueve a<html>enelemento siguiente y realiza la misma operación, luego realiza el siguiente, y así sucesivamente, hasta llegar al elemento que se hizo clic realmente.
EnBurbujaLa fase es exactamente opuesta:
El navegador verifica si el elemento que se hizo clic realmente en la fase de burbuja tiene registrado el programa de manejo de eventos onclick, y si es así, ejecuta el programa de manejo de eventos.
Luego, se mueve al siguiente elemento de nivel superior directo y luego ejecuta el siguiente, y así sucesivamente, hasta llegar a<html>hasta el elemento.
En los navegadores más populares, por defecto, todos los programas de manejo de eventos se registran en la fase de burbuja.
En la fase de captura, el evento se propaga desde la Window hacia abajo a través del árbol DOM hasta el nodo objetivo.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);Prueba y observa‹/›Sólo cuandoaddEventListener()El tercer parámetro se establece en true para que la captura de eventos se utilice junto con los programas de manejo registrados en ese momento.
En la fase de burbuja, es exactamente lo contrario. En esta fase, el evento se propaga o burbujea desde el elemento de destino hasta la Window, propagándose hacia arriba por el árbol DOM.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);Prueba y observa‹/›Todos los navegadores admiten la burbuja de eventos y la propagación de eventos es aplicable a todos los programas de manejo, sin importar cómo se registren (por ejemplo, usando onclick o addEventListener()).
Si desea evitar que cualquier programa de manejo de eventos de los ancestros sea notificado mediante el método event.stopPropagation(), también puede detener la propagación del evento en el medio.
En el siguiente ejemplo, si hace clic en un elemento secundario, no se ejecutará el escuchador de eventos click del elemento padre:
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();
}Prueba y observa‹/›El elemento de destino es el nodo DOM que ha generado el evento.
Por ejemplo, si el usuario hace clic en un hipervínculo, el elemento de destino es el hipervínculo.
El acceso al elemento de destino es event.target, y no cambia durante la fase de propagación del 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);
}Prueba y observa‹/›Algunos eventos tienen asociados con ellos operaciones por defecto. Por ejemplo, si hace clic en un enlace, el navegador lo llevará al destino del enlace, si hace clic en un botón de envío de formulario, el navegador enviará el formulario, etc. Puede usar el método event.preventDefault() del objeto evento para evitar estas operaciones por defecto.
function myFunc() {
event.preventDefault();
}Prueba y observa‹/›Sin embargo, evitar la acción por defecto no impide la propagación del evento; el evento sigue propagándose como de costumbre hasta el árbol DOM.
La burbuja nos permite utilizar el delegado de eventos.
La delegación de eventos te permite evitar agregar escuchadores de eventos a un nodo específico; en su lugar, agrega un escuchador de eventos a un objeto padre.
Este concepto se basa en el hecho de que si deseas ejecutar algún código al hacer clic en cualquier uno de los elementos hijos, puedes configurar un escuchador de eventos en el elemento padre y hacer que los eventos que ocurren en los elementos hijos se propaguen al elemento padre, sin necesidad de configurar un escuchador de eventos para cada hijo.
En este ejemplo, si deseas que aparezca un mensaje al hacer clic, puedes configurar un escuchador de eventos de click en el elemento padre y hacer que los eventos que ocurren en los elementos hijos se propaguen al elemento padre, sin necesidad de configurar un escuchador de eventos para cada hijo.<ul>Configurar un escuchador de eventos de click en el padre, que mostrará el elemento de lista
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("List item " + event.target.id.replace("post-", "") + " was clicked!");
}
});
</script>Prueba y observa‹/›