1. Flujo de eventos
El orden en el que el elemento HTML desencadena eventos.
2. Event Bubble, el flujo de eventos de IE se llama Bubble de eventos, lo que significa que el evento comienza por el elemento más específico (el nodo con el nivel de anidación más profundo del documento), y luego propaga hacia arriba paso a paso al nodo (documento) menos específico. 3. Captura del evento La idea de la captura de eventos es que los nodos menos específicos deberían recibir eventos antes, mientras que los nodos más específicos deben recibir nodos al final. El propósito de la captura de eventos es capturar el evento antes de alcanzar el objetivo predeterminado.
Transmisión de eventos DOM
El flujo de eventos especificado en el "Flujo de eventos de nivel DOM2" incluye tres etapas: la etapa de captura de eventos, la etapa objetivo y la etapa de burbujas. Lo primero que sucede es la captura de eventos, que brinda la oportunidad de interceptar eventos. Luego, el objetivo real recibe el evento. La última etapa es la fase de burbuja, donde se pueden responder los eventos. Tomando una página HTML simple como ejemplo, hacer clic en el elemento <Div> activará los eventos en el orden que se muestra a continuación.
En el flujo de eventos DOM, el objetivo real (<div> elemento) no recibe eventos durante la fase de captura. Esto significa que durante la fase de captura, el evento se detiene después del documento a <html> y luego a <body>. La siguiente etapa es la etapa "dirigida", por lo que el evento ocurre en <div> y se ve como parte de la fase de burbuja en el procesamiento del evento. Luego se produce la fase de burbuja y el evento se propaga al documento.
La mayoría de los navegadores que admiten la transmisión de eventos DOM implementan un comportamiento específico; A pesar de que la especificación del "evento de nivel DOM2" requiere claramente que la etapa de captura no involucre el objetivo del evento, Safari, Chrome, Firefox y Opera9.5 y luego desencadenará eventos en los objetos del evento durante la etapa de captura. Como resultado, hay dos oportunidades para operar eventos en el objeto objetivo.
Detener eventos de burbujas
experimento
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javaScript"> function onBtn () {alert ('botón'); // cancelBubble (); Prevenir burbujas de eventos} // Obtener la función del objeto de evento getEvent () {// Si es IE o Chromeif (Window.event) {return Window.event;} // para Firefoxfunc = getEvent.caller; // Obtener la persona que llama mientras (func! = null) {var arg0 = func.arguments [0]; // Obtenga el primer parámetro de la persona que llama // juzga si el parámetro está vacío if (arg0) {// juzga si arg0 es un objeto de evento if ((arg0.constructor == event || arg0.constructor == mouseevent || arg0.constructor == keyboardevent) || (typeof (arg0) == "&& arg0.preventventfeFoult ofault) arg0.stoppropagation)) {return arg0; }} // Get FUNC Caller Func = FunC.Caller;} return null;} // Block Event Bubbles Función CancelBubble () {event = getEvent (); // Firefox Chrome if (event.preventDefault) {event.preventDefault (); event.stopPropagation (); } else {// ie event.cancelBubble = true; event.returnValue = false; }} </script> </head> <body onClick = "alert ('body')"> <div onClick = "alert ('div');" style = "Background-Color: Green"> <Button OnClick = "Onbtn ()"> DSD </Button> </div> </body> </html>El código HTML anterior se ejecuta en el orden de activación del evento.
Valor predeterminado: 'Button' aparecerá ---》 aparecerá 'div' ----》 aparecerá 'cuerpo'
Si agrega código CancelBubble (): solo aparecerá 'botón'
El artículo anterior tiene una comprensión profunda del mecanismo del evento JS DOM. Es todo el contenido que he compartido contigo. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.