1. Comprender el burbujeo de eventos y la captura de eventos
En JS, llamamos al orden en que ocurren los eventos "flujo de eventos". Cuando se activa un evento, se producirá una serie de reacciones en cadena.
-
< div clase = "abuelo" >
-
soy el abuelo div
-
< p clase = "hijo" >
-
soy hijo p
-
< a class = "nieto" href = "#" >
soy nieto a </ a >
-
</ p >
-
</div> _ _
Si vincula un evento a cada etiqueta, al hacer clic en la etiqueta <a>, encontrará que los eventos vinculados a las etiquetas <div> y <p> también se activarán. ¿Por qué? Para responder a esta pregunta, Microsoft y Netscape propusieron dos conceptos diferentes: captura de eventos y burbujeo de eventos
(1) Captura de eventos: propuesto por Microsoft Corporation, el evento fluye desde el nodo raíz del documento (objeto de documento) hasta el nodo de destino, pasando por cada nodo principal del nodo de destino en el camino y desencadenando eventos de captura en estos nodos hasta alcanzar el nodo de destino del evento
(2) Burbujeo de eventos: propuesto por Netscape, a diferencia de la captura de eventos, el evento fluirá desde el nodo de destino hasta el nodo raíz del documento, pasando por cada nodo principal del nodo de destino en el camino y desencadenando eventos de captura en estos nodos hasta llegar al nodo raíz del documento. Todo el proceso es como burbujas de aire en el agua, moviéndose hacia arriba desde el fondo del agua.
Sugerencias: el nodo de destino mencionado anteriormente se refiere al nodo que desencadena el evento
Posteriormente, para unificar el estándar, el W3C adoptó un método de compromiso, que consiste en combinar la captura de eventos con el burbujeo de eventos, que ahora es "capturar primero y luego burbujear", como se muestra en la siguiente figura:
2. Captura de eventos (captura de eventos)
En la fase de captura de eventos, el evento comienza desde la capa más externa del árbol DOM, pasa a través de cada nodo principal del nodo de destino y activa el evento en el nodo principal hasta que alcanza el nodo de destino del evento. Tome el código de la imagen de arriba como ejemplo, si hace clic en la etiqueta <a>,
Luego, el evento se enviará a la etiqueta <a> en el orden de documento -> div -> p -> a.
expandir:
elemento.addEventListener(evento, función, useCapture)
El método addEventListener se usa para enlazar una función de procesamiento de eventos para un elemento específico. Hay tres parámetros, que son " tipo de evento sin encendido", "función de procesamiento de eventos" y "fase de control de eventos ". El tercer parámetro es de tipo booleano. El valor predeterminado es falso, lo que significa que se llama a la función de procesamiento de eventos durante la fase de burbujeo de eventos. Pasar verdadero como en el código anterior significa que se llama a la función de procesamiento de eventos durante la fase de captura de eventos.
3. Burbujeo de eventos
El burbujeo de eventos es exactamente lo opuesto a la captura de eventos. El burbujeo de eventos comienza desde el nodo de destino, sube a lo largo del nodo principal y activa el evento en el nodo principal hasta el nodo raíz del documento, como una burbuja en el fondo del agua. siempre subirá .
4. Evite la captura y el burbujeo de eventos
Después de comprender la captura de eventos y el burbujeo de eventos, encontrará que esta característica no es amigable. Por ejemplo, vinculamos un evento en un nodo determinado y queríamos activar este evento cuando hicimos clic. Como resultado, debido al burbujeo de eventos, el evento de este nodo fue Sus elementos secundarios se activan. ¿Cómo evitamos que esto suceda?
El método stopPropagation() se proporciona en JS para evitar la captura y el burbujeo de eventos. La sintaxis es la siguiente:
event.stopPropagation();
Nota: stopPropagation() evitará la captura y el burbujeo de eventos, pero no puede evitar el comportamiento predeterminado de la etiqueta. Por ejemplo, al hacer clic en un enlace aún se puede abrir la página web correspondiente.
Además, puede usar el método stopImmediatePropagation() para evitar otros controladores de eventos para el mismo evento del mismo nodo. Por ejemplo, si se definen varios eventos de clic para un nodo, cuando se activa el evento, estos eventos se ejecutarán secuencialmente. en el orden definido Si el método stopImmediatePropagation() se usa en un controlador de eventos, los controladores de eventos restantes no se ejecutarán.
El formato de sintaxis es el siguiente:
event.stopImmediatePropagation();
Ejemplo:
5. Bloquear acciones predeterminadas
Algunos eventos tienen acciones predeterminadas asociadas con ellos, por ejemplo: cuando se hace clic en un enlace, saltará automáticamente a la página especificada, cuando se hace clic en el botón Enviar, los datos se enviarán al servidor, etc. Si no desea que ocurra una operación predeterminada de este tipo, puede usar el método preventDefault() para evitarlo, y su sintaxis es la siguiente:
event.preventDefault();
Ejemplo:
Nota: IE9 y las versiones anteriores no son compatibles con el método preventDefault(), para los navegadores IE9 y anteriores, puede usar event.returnValue = false;