A partir del capítulo de hoy, me centraré en introducir el contenido de la gestión de eventos de KITJS e intentaré exponerle en un lenguaje simple cómo el marco JS convencional implementa su propia función de gestión de eventos independiente internamente.
(I) eventos dom ordinarios
Generalmente podemos escribir eventos en HTML apoyando
<a onClick = ”alerta (1)”> prueba </a>
O atar después de obtener el objeto DOM
document.getElementById ('a'). onClick = function () {alerta (1)}
O eventos secundarios
document.getElementById ('A'). AddEventListener ('Click', function () {Alert (1)}, Flase)
O a través de la etiqueta de script
<script for = "a" event = "onclick"> alerta (1) </script>
El estándar W3C recomienda el tercer método de unión anterior, que es un método de evento secundario, con el propósito de desacoplar la fuerte dependencia de HTML y JS
(Ii) Pregunta
Sin embargo, si solo usamos el Modo 3 para realizar directamente nuestra programación JS, no es suficiente, porque encontraremos los siguientes problemas
1. Compatibilidad del navegador. Los parámetros del navegador admitido por la serie IE y W3C no son consistentes para los nombres y parámetros de métodos de enlace de eventos de segundo nivel.
2. Después de vincularse a través de eventos de nivel 2, no puede saber si otros tienen eventos vinculados al mismo elemento, ¿qué eventos han estado obligados y cuál es el contenido del evento?
3. Después de activarse el método de enlace de los eventos de nivel 2, el orden no está en el orden antes del enlace, sino que se ejecuta al azar. Sin embargo, a veces, necesitamos ordenar los métodos activados.
4. Cuando se activa el evento del mismo elemento, la API estándar de W3C no admite detenerse y continuar desencadenando otros eventos vinculados al mismo elemento, W3C admite burbujas de detención.
5. Muchas veces, registramos un evento de nivel 2 a través del método de función anónima, y no se deja ningún mango para registrar el método de ejecución del evento, por lo que es difícil cancelar el evento a través de RemoVentListener.
(Iii) Cómo resolver el problema del kit
Ok, el marco JS existe para resolver los problemas anteriores. Veamos cómo Kit maneja los problemas anteriores.
En la API kit.js, hay un método EV (config)
Este método acepta un objeto de tipo de mapa, que contiene 4 parámetros importantes.
El elemento que necesita estar atado
Tipo de evento de cadena
Método de ejecución de FN dispara
El alcance se puede omitir, ya sea que este puntero sea necesario especificar, si ninguno, el EL en el momento del registro se pasa como este puntero
(Iv) Análisis de código
Echemos un vistazo a la implementación del código
Comience directamente desde la parte central
Si el parámetro entrante no está vacío, se crea un objeto en el parámetro entrante EL para guardar el registro de eventos de KITJS EVREG
Hay dos objetos infantiles en el objeto Evreg, uno se llama evregev, que guarda el evento registrado
En el objeto EVREGEV, guarde una clave como evento registrado actual, y el valor es una matriz. En la matriz, coloque los parámetros de configuración pasados en el método EV en el orden de Primero y luego llegada. ¡Tenga en cuenta que esta es una matriz! ! ! Debido a que las matrices pueden ahorrar orden, esto es muy importante
También hay un método anónimo llamado Evregfn, que guarda los desencadenantes de eventos.
Podemos ver que Evregfn es un evento anónimo. Al principio, determinará si la ventana de la variable global [me.constants.kit_event_stopimmediatepropagation] es == verdadero. Si es cierto, volverá y no continuará ejecutándose.
Luego, mire hacia abajo, aceptará el objeto EV activado por el evento y adjuntará muchos objetos al EV utilizando MergeIF, como Target, CurrentTarget, RelationTarget, para resolver el problema de compatibilidad del navegador.
Stopnow, StopDefault, Stopgoon son métodos creados para evitar que los eventos continúen activando.
El siguiente párrafo es la clave para EVREGFN. Realizaremos la matriz de eventos en el EVREGEV creado antes, eliminaremos los parámetros de configuración pasados en el método EV anterior en orden y ejecutaron el método en el parámetro de configuración. Si el valor de retorno del método no está vacío, devolverá su valor de retorno.
Finalmente, hacemos compatible con un navegador y vinculamos nuestro método anónimo evregfn utilizando un método de evento de nivel 2.
(V) Resumen
En pocas palabras, Kit usa su propio método anónimo para almacenar en caché el manejo de registro de eventos e ingresar una matriz, para que pueda recordar la secuencia de eventos, así como proporcionar una entrada para descubrir los eventos, parámetros, métodos, métodos, etc. registrados previamente, y al mismo tiempo es compatible con la compatibilidad del navegador.
(Vi) Evento de cierre de sesión
Con Kit Help Helps Cache Event Handles, cerrar la sesión se vuelve simple
Puede ver que el kit encuentra la configuración del evento correspondiente a través de la comparación directa, o la comparación de fn.ToString, y fn.ToString (). Trim () comparación y la elimina de la matriz
(Vii) Mejora del evento
Debería haber notado ahora que Kit ha realizado una operación fusionada en el objeto del evento del sistema. En primer lugar, ¿por qué necesitas hacer Megerif? Debido a que las propiedades del objeto del objeto del evento del sistema son lectores y no se pueden sobrescribir, solo puede agregar propiedades que no tiene.
Entonces Kit solo puede Megerif. Todos sabemos que existe una incompatibilidad del objeto de evento del objeto de evento de cada navegador, por lo que Kit debe solucionar estas incompatibilidad. Por ejemplo, IE no tiene un atributo objetivo, solo SrCelement. Podemos agregar el atributo objetivo para lograr la compatibilidad del estándar W3C
Por supuesto, solo la reparación no puede satisfacer nuestras necesidades. Muchas veces, todavía necesitamos aumentar un poco de peso para el objeto del evento.
Por ejemplo, al desarrollar touchdown y touchmove en iPhone, a menudo necesitamos obtener compensaciones de un solo dedo, y obtener compensaciones de un solo dedo, ev.targettouches [0] .Clientx, dicho código, pero una vez que la función anónima sea así, será incompatible en la PC.
¿Qué hacer? No importa, podemos dar el objeto de eventos fusionar nuestros propios atributos
FirstFingerClientx, etc., para que podamos implementar fácilmente el código unificado desarrollado por Mobile y PC.
Incluyendo, el próximo artículo hablará sobre HTML5 Drag and Drop, y los eventos avanzados de gestos se basan en esta base.
Agregue a esto, ¿por qué no el propio evento de nuevo como extjs es porque es porque
1. El objeto nativo del sistema tiene una cierta relación de herencia y no quiere ser destruido.
2. Si usa su propio objeto nuevo, el código puede ser imposible después de que esté fuera del marco, y el contenido del código debe cambiarse nuevamente.