Recientemente, debido a que tengo que modificar el sitio web todos los días para hacer efectos especiales para el sitio web, he visto muchos incidentes de contacto JS. Solo sé cómo usar una pequeña parte de ella. A veces también es bastante caótico cuando lo uso. Ahora lo he resuelto. ¡Lo compartiré con la plataforma Wulin Network para su referencia!
1. ¿Qué es un evento JavaScript?
Los eventos son el corazón latido de las aplicaciones de JavaScript y el pegamento que coloca todo juntos. Cuando tenemos ciertos tipos de interacciones con páginas web en el navegador, los eventos ocurren.
Los eventos pueden hacer clic en cierto contenido, pasar a través de un elemento específico o presionar ciertas teclas en el teclado, y los eventos también pueden ser algo que sucede en un navegador web, como una determinada página web de la página o el usuario desplazando la ventana o cambiando el tamaño de la ventana. Para decirlo sin rodeos, ¡los eventos son momentos de interacción específicos que ocurren en un documento o navegador!
Al usar JavaScript, puede escuchar eventos específicos y especificar que ciertos eventos ocurren en respuesta a ellos.
2. Flujo de eventos
El flujo de eventos describe el orden de los eventos aceptados en la página. En las primeras etapas del desarrollo del navegador, dos principales fabricantes de navegadores, es decir, Netscape lucharon entre sí, y se produjo una situación de trampa, es decir, su interpretación del flujo de eventos mostró dos definiciones completamente opuestas. Eso es con lo que estamos familiarizados: es decir, burbujas de eventos, captura de eventos Netscape. Primero tomemos una foto y echemos un vistazo breve a la estructura:
1. Burbujas de eventos
Las burbujas de eventos significa que el evento es recibido por primera vez 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 menos específico (el documento). Tome el diagrama anterior para ilustrar que al hacer clic en la parte del texto, primero es recibido por el elemento en el texto, y luego se propaga a la ventana paso a paso, es decir, el proceso de 6-7-8-9-10 se ejecuta.
2. Captura de eventos
La captura del evento significa que el evento es recibido por primera vez por un nodo menos específico, y el nodo más específico finalmente recibe el evento. Del mismo modo, en el modelo anterior, al hacer clic en la parte del texto, primero es recibido por la ventana y luego se propaga al elemento de texto paso a paso, es decir, se ejecuta el proceso de 1-2-3-4-5.
¿Cómo funciona en el código? ¡Dado más tarde!
3. Tres formas de manejar el evento JavaScript
Cuando ocurre un evento, tenemos que lidiar con él. Hay tres formas principales de manejar los controladores de eventos JavaScript:
1. Manejador de eventos HTML
Es decir, agregamos directamente los controladores de eventos al código HTML, como el siguiente código:
<input id = "btn" value = "button" type = "button" onClick = "showmsg ();"> <script> function showmsg () {alert ("html agregar procesamiento de eventos"); } </script>En el código anterior, podemos ver que el procesamiento de eventos está directamente anidado en elementos. Hay un problema con esto: el acoplamiento entre el código HTML y JS es demasiado fuerte. Si desea cambiar ShowmsG en JS algún día, entonces no solo necesita modificarlo en JS, sino que también necesita modificarlo en HTML. Podemos aceptar una o dos modificaciones, pero cuando su código alcanza el nivel de 10,000 líneas, le costará a las personas y al dinero modificarlo. Por lo tanto, no recomendamos este método.
2. Manejador de eventos de nivel DOM0
Es decir, agregue el procesamiento de eventos al objeto especificado, consulte el siguiente código:
<input id = "btn" value = "button" type = "botón"> <script> var btn = document.getElementById ("btn"); btn.OnClick = function () {alert ("procesamiento de eventos de adición de nivel dom"); } btn.onclick = null; // Si desea eliminar el evento de clic de BTN, configúrelo en NULL </script>En el código anterior, podemos ver que el acoplamiento entre eventos de nivel DOM0, código HTML y código JS se ha reducido considerablemente en comparación con los controladores de eventos HTML. Sin embargo, los programadores inteligentes aún no están satisfechos y esperan encontrar una forma más simple de lidiar con eso. Echemos un vistazo al tercer método.
3. Manejador de eventos de nivel DOM2
DOM2 también está agregando controladores de eventos a objetos específicos, pero implica principalmente dos métodos, que se utilizan para manejar las operaciones de especificar y eliminar los controladores de eventos: AddEventListener () y RemoVentListener (). Todos reciben tres parámetros: el nombre del evento a procesar, la función como controlador de eventos y un valor booleano (si el evento se procesa en la etapa de captura), consulte el siguiente código:
<input id = "btn" value = "button" type = "botón"> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("hacer clic", showmsg, falso); // Aquí establecemos el último valor en falso, es decir, no se procesa en la etapa de captura. En términos generales, el procesamiento de burbujas es más compatible en cada función del navegador showmsg () {alerta ("Dom-Level Add Event Handler"); } btn.removeEventListener ("haga clic", showmsg, false); // Si desea eliminar este evento, solo necesita pasar el mismo parámetro </script>Aquí podemos ver que al agregar y eliminar eventos, el último método es más directo y simple. Sin embargo, Ma Haixiang les recuerda a todos que al procesar el evento Eliminar, los parámetros aprobados deben ser consistentes con los parámetros anteriores, ¡de lo contrario la eliminación no será válida!
4. El proceso y la diferencia entre las burbujas de eventos y la captura de eventos
Dicho esto, permítame darle algún código para explicar el proceso de burbujas de eventos y captura de eventos, y al mismo tiempo le permita ver la diferencia entre los dos:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <title> document </title> <style> #p {width: px; altura: px; border: px sólido negro;} #c {width: px; px; px; border: px sólido rojo;} </style> </head <head <head> <shiad>; www.mahaixiang.cn <div id = "c"> Me gusta www.mahaixiang.cn </div> </div> <script> var p = document.getElementById ('p'); var c = document.getElementById ('c'); c.adDeventListener ('click', function () {alert ('captura de nodo infantil')}, true); c.adDeventListener ('click', function () {alert ('burbujas de nodo infantil')}, falso); p.adDeventListener ('click', function () {alert ('burbujas de nodo infantil')}, falso); </script> </body> </html>Al ejecutar el código anterior y hacer clic en el elemento infantil, encontraremos que el orden de ejecución es: burbuja de nodo de nodo de nodo de captura de nodo de nodo principal de nodo principal. A partir de este ejemplo, podemos entender que, además, el evento de nivel DOM2 estipula que los eventos incluyen tres etapas:
1. Etapa de captura de eventos;
2. En la etapa objetivo;
3. La etapa de burbujas del evento.
Primero, es captura, luego en la etapa objetivo (es decir, al lugar donde se emite el evento), y finalmente está burbujeante. Lo que no es científico es que no hay un programa de manejo de eventos de nivel DOM1. ¡Por favor, preste atención y deje de hacer bromas!
5. Suplemento
1. El controlador de eventos IE también tiene dos métodos: adjectEvent () agrega eventos y elimina los eventos de eliminación (). Estos dos métodos reciben los mismos dos parámetros: el nombre del controlador de eventos y la función de procesamiento de transacciones. ¿Por qué no hay valor booleano aquí? Debido a que las versiones IE8 y anteriores solo admiten burbujas de eventos, ¡el último parámetro es equivalente a falso de forma predeterminada! (Los navegadores que admiten los controladores de eventos IE incluyen IE, Opera).
2. Los objetos de eventos son objetos utilizados para registrar información relevante cuando ocurren algunos eventos, pero los objetos de eventos solo se generarán cuando ocurran eventos, y la función del controlador de eventos solo puede acceder internamente. Después de que se ejecutan todas las funciones del controlador de eventos, ¡el objeto del evento se destruye!
Lo anterior es la forma de manejar los eventos de JavaScript (tres tipos) presentados por el editor. ¡Espero que te sea útil!