Lecturas relacionadas:
JavaScript Event Learning Resumen (V) Tipo de evento de ratón en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Resumen (I) Flujo de eventos
//www.vevb.com/article/86261.htm
JavaScript Event Learning Resumen (IV) Miembros públicos del evento (propiedades y métodos)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Summary (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript Event Learning Resumen (III) JS Event Object
1. Eventos
Un evento es una cierta acción realizada por el usuario o el navegador, como Click, Load y MouseOver, son todos los nombres del evento.
Los eventos son el puente entre JavaScript y DOM.
Si activa, ejecutaré el evento y llamaré a su función de procesamiento para ejecutar el código JavaScript correspondiente para dar la respuesta.
Los ejemplos típicos son: el evento de carga se activa después de cargar la página; El usuario hace clic en el elemento y activa el evento de clic.
2. Flujo de eventos
1. Conciencia de la influenza de los eventos
Pregunta: Haga clic en el elemento de la página, ¿qué tipo de elemento puede sentir tal evento?
Respuesta: Al hacer clic en un elemento, también hace clic en el elemento contenedor del elemento, o incluso en la página completa.
Ejemplo: hay tres círculos concéntricos, agregue la función de manejo de eventos correspondiente a cada círculo, y aparece el texto correspondiente. Haga clic en el círculo más interno y también haga clic en el círculo exterior, de modo que el evento de clic del círculo exterior también se activará.
<! DocType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <syle> #outer {posición: absoluto; Ancho: 400px; Altura: 400px; arriba: 0; Izquierda: 0; Abajo: 0; Derecha: 0; margen: auto; Color de fondo: Deeppink; } #middle {posición: absoluto; Ancho: 300px; Altura: 300px; arriba: 50%; margen -izquierda: -150px; margen -top: -150px; Color de fondo: DeepskyBlue; } #inner {posición: absoluto; Ancho: 100px; Altura: 100px; arriba: 50%; Izquierda: 50%; margen -izquierda: -50px; margen -top: -50px; Color de fondo: Darkgreen; Text-Align: Center; Línea de altura: 100px; Color: blanco; }#externo,#Middle,#Inner {Border-Radius: 100%; } </style> <body> <div id = "outer"> <div id = "Middle"> <div id = "interno"> ¡Haz clic en mí! </div> </div> </div> <script> var innercircle = document.getElementById ("interno"); innercircle.onClick = function () {alert ("innercircle"); }; var middlecircle = document.getElementById ("Middle"); middlecircle.onClick = function () {alert ("middlecircle"); } var ourtercircle = document.getElementById ("externo"); OuterCircle.OnClick = function () {alert ("OuterCircle"); } </script> </body> </html>Los efectos son los siguientes:
2. Flujo de eventos
Cuando ocurra un evento, se propagará en un orden específico entre el nodo del elemento y el nodo raíz. Todos los nodos que pasen por el camino recibirán el evento. Este proceso de propagación es el flujo de eventos DOM.
El orden de propagación de eventos corresponde a los dos modelos de transmisión de eventos del navegador: transmisión de eventos de captura y transmisión de eventos de burbujas.
Stream de eventos de burbujas: la propagación de eventos es del objetivo de eventos más específico al objetivo de evento menos específico. Es decir, desde las hojas del árbol dom hasta la raíz.
Transmisión de eventos capturados: la propagación de eventos es desde el objetivo de evento menos específico hasta el objetivo de eventos más específico. Es decir, desde las raíces del árbol dom hasta las hojas.
*
En el código HTML anterior, haga clic en el elemento <div> en la página.
En la transmisión de eventos burbujeantes, haga clic en la orden de propagación de eventos es <div> -》 <body> -》》 <html> -》》 documento
En la transmisión de eventos capturados, haga clic en la orden de propagación de eventos es documento -》 <html> -》 <body> -》 <div>
nota:
1) Todos los navegadores modernos admiten burbujas de eventos, pero existen ligeras diferencias en implementaciones específicas:
En IE5.5 y antes, las burbujas de eventos omitirán el elemento <html> (saltar directamente del cuerpo al documento).
IE9, Firefox, Chrome y Safari Bubble Events hasta el objeto de la ventana.
2) IE9, Firefox, Chrome, Opera y Safari All Support Capture. Aunque el estándar DOM requiere que los eventos se propagen a partir de objetos de documento, estos navegadores comienzan a capturar eventos de los objetos de la ventana.
3) Dado que los viejos navegadores no lo admiten, pocas personas usan la captura de eventos. Se recomienda usar burbujas de eventos.
Transmisión de eventos DOM
El estándar DOM usa captura + burbujeante. Ambas transmisiones de eventos activan todos los objetos del DOM, comenzando con el objeto de documento y terminando con el objeto de documento.
El estándar DOM estipula ese flujo de eventos incluye tres etapas: etapa de captura de eventos, en la etapa objetivo y la etapa de burbujas de eventos.
Fase de captura de eventos: el objetivo real (<iv>) no recibirá eventos durante la fase de captura. Es decir, en la etapa de captura, el evento se detiene del documento a <html> y luego a <body>. En la imagen de arriba, es 1 ~ 3.
En la etapa objetivo: el evento ocurre y se procesa en <Viv>. Pero el procesamiento de eventos será visto como parte de la fase burbujeante.
Fase de burbujas: los eventos se propagan al documento.
nota:
1): El estándar DOM estipula que la captura de fase de captura de eventos involucra objetivos de eventos, pero los eventos en los objetos de eventos se establecerán en IE9, Safari, Chrome, Firefox, Opera9.5 y las versiones posteriores comenzarán eventos en los objetos de eventos durante la fase de captura. Como resultado, hay dos oportunidades para operar eventos en el objeto objetivo.
2): No todos los eventos pasan por la etapa de burbuja. Todos los eventos pasan por la etapa de captura y están en la etapa objetivo, pero algunos eventos omiten la etapa de burbujas: por ejemplo, el evento de enfoque que obtiene el enfoque de entrada y el evento de desenfoque que pierde el enfoque de entrada.
Ejemplo de dos oportunidades para operar eventos en el objeto objetivo:
<! DocType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <syle> #outer {posición: absoluto; Ancho: 400px; Altura: 400px; arriba: 0; Izquierda: 0; Abajo: 0; Derecha: 0; margen: auto; Color de fondo: Deeppink; } #middle {posición: absoluto; Ancho: 300px; Altura: 300px; arriba: 50%; margen -izquierda: -150px; margen -top: -150px; Color de fondo: DeepskyBlue; } #inner {posición: absoluto; Ancho: 100px; Altura: 100px; arriba: 50%; Izquierda: 50%; margen -izquierda: -50px; margen -top: -50px; Color de fondo: Darkgreen; Text-Align: Center; Línea de altura: 100px; Color: blanco; }#externo,#Middle,#Inner {Border-Radius: 100%; } </style> <body> <div id = "outer"> <div id = "Middle"> <div id = "interno"> ¡Haz clic en mí! </div> </div> </div> <script> var innercircle = document.getElementById ("interno"); innercircle.addeventListener ("hacer clic", function () {alert ("El evento de clic de InnerCircle se dispara en la etapa de captura");}, true); innercircle.addeventListener ("hacer clic", function () {alert ("El evento de clic de InnerCircle se dispara en la etapa de burbuja");}, falso); var middlecircle = document.getElementById ("Middle"); middlecircle.addeventListener ("hacer clic", function () {alert ("El evento de Click MidDlecircle se dispara en la etapa de captura");}, true); middlecircle.addeventListener ("hacer clic", function () {alert ("el evento de clic de Middlecircle se dispara en la etapa de burbuja");}, falso); var ourtercircle = document.getElementById ("externo"); OuterCircle.AdDeventListener ("Click", function () {alert ("Evento de Click OuterCircle se dispara en la etapa de captura");}, verdadero); OuterCircle.AdDeventListener ("Click", function () {alert ("Evento de Click OuterCircle se dispara en la etapa de burbujas");}, falso); </script> </body> </html>El efecto de operación es que 6 cajas aparecerán una tras otra. Para explicar el principio, lo integré en una imagen:
3. Aplicación típica del flujo de eventos - proxy de eventos
En el procesamiento de eventos tradicionales, se debe agregar un controlador de eventos a cada elemento. JS Event Proxy es una técnica simple y efectiva, a través de la cual puede agregar el procesador de eventos a un elemento principal, evitando así agregar el procesador de eventos a múltiples elementos infantiles.
El principio del proxy de eventos utiliza burbujas de eventos y elementos objetivo, agregue el procesador de eventos al elemento principal, espere a que el elemento infantil a los eventos de burbujas y el elemento principal pueda determinar qué elemento infantil es a través del objetivo (es decir, el srcelement) y, por lo tanto, realizar el procesamiento correspondiente. Para obtener más contenido sobre Target, consulte los siguientes ejemplos para los miembros públicos (propiedades y métodos) del evento (iv) para los siguientes ejemplos.
Procesamiento de eventos tradicionales, agregando un controlador de eventos a cada elemento, el código es el siguiente:
<body> <ul id = "color-list"> <li> rojo </li> <li> naranja </li> <li> amarillo </li> <li> verde </li> <li> azul </li> <li> indigo </li> <li> púrpura </li> </ul> <script> (function () {var colorlist = document.getEnmementByid ("color-list");; Colors = Colorlist.getElementsByTagName ("Li"); alerta (TargetElement.innerHtml);El método de procesamiento del agente de eventos es el siguiente:
<body> <ul id = "color-list"> <li> rojo </li> <li> naranja </li> <li> amarillo </li> <li> verde </li> <li> azul </li> <li> Indigo </li> <li> púrpura </li> </ul> <script> (function () {var colorlist = document.getelementByid ("color-list"); ColorList.AdDeventListener ('Click', showColor, false); }}) (); </script> </body>Para resumir los beneficios del proxy del evento:
a. Reduzca múltiples procesadores de eventos a uno, porque el procesador de eventos debe residir en la memoria, lo que mejora el rendimiento. Imagínese si hay una tabla de 100 filas, comparando la forma tradicional de los controladores de eventos de unión para cada celda con proxy de eventos (es decir, agregar un controlador de eventos a la mesa), no es difícil concluir que el proxy de eventos evite algunos riesgos potenciales y mejora el rendimiento.
b. DOM Update no requiere reembolsar el procesador de eventos, porque el proxy de eventos puede adoptar diferentes métodos de procesamiento para diferentes elementos infantiles. Si se agregan otros elementos infantiles (A, Span, Div, etc.), puede modificar directamente la función del controlador de eventos del agente de eventos. No hay necesidad de volver a reembolsar el procesador y no es necesario que vuelvan a recorrer.
Lo anterior es el Resumen de aprendizaje de eventos JavaScript (i) Conocimiento relacionado sobre la transmisión de eventos que el editor le presentó. ¡Espero que sea útil para todos!