A partir do capítulo de hoje, vou me concentrar na introdução do conteúdo do gerenciamento de eventos da KITJS e tentarei expor a você em uma linguagem simples como a estrutura JS principal implementa sua própria função independente de gerenciamento de eventos internamente.
(I) Eventos Ordinários de DOM
Geralmente podemos escrever eventos em HTML apoiando
<a onclick = ”alert (1)”> teste </a>
Ou vincular depois de obter o objeto DOM
document.getElementById ('a'). OnClick = function () {alert (1)}
Ou eventos secundários
Document.getElementById ('A'). AddEventListener ('Click', function () {alert (1)}, Flase)
Ou via tag de script
<script para = "a" event = "onclick"> alert (1) </sCript>
O padrão W3C recomenda o terceiro método acima de ligação, que é um método de evento secundário, com o objetivo de dissociar a forte dependência de HTML e JS
(Ii) Pergunta
No entanto, se usarmos apenas o Modo 3 para executar diretamente nossa programação JS, não é suficiente, porque encontraremos os seguintes problemas
1. Compatibilidade do navegador. Os parâmetros do navegador suportados pela série IE e W3C não são consistentes para os nomes e parâmetros de métodos de ligação a eventos de segundo nível.
2. Após a ligação através dos eventos de nível 2, você não pode saber se outras pessoas vinculam o mesmo elemento, quais eventos foram vinculados e qual é o conteúdo do evento?
3. Após o método de ligação dos eventos de nível 2 ser acionado, a ordem não está na ordem antes da ligação, mas é executada aleatoriamente. No entanto, às vezes, precisamos solicitar os métodos acionados.
4. Quando o evento do mesmo elemento é acionado, a API padrão de W3C não suporta parar e continuar acionando outros eventos ligados ao mesmo elemento, o W3C suporta a parada de bolhas.
5. Muitas vezes, registramos um evento de nível 2 através do método de função anônima e nenhum identificador para registrar o método de execução do evento é deixado, por isso é difícil cancelar o evento através do RemoneventListener.
(Iii) como resolver o problema do kit
OK, a estrutura do JS existe para resolver os problemas acima. Vamos ver como o kit lida com os problemas acima.
Na API do kit.js, existe um método EV (config)
Este método aceita um objeto de tipo de mapa, que contém 4 parâmetros importantes.
El elemento que precisa ser amarrado
Tipo de evento de string
FN gatilhos Método de execução
O escopo pode ser omitido, se esse ponteiro precisa ser especificado, se não, o EL no momento do registro é passado como este ponteiro
(Iv) Análise de código
Vamos dar uma olhada na implementação do código ainda
Comece diretamente da parte principal
Se o parâmetro recebido não estiver vazio, um objeto será criado no parâmetro EL para salvar o registro de eventos de kitjs evreg
Existem dois objetos infantis no objeto Evreg, um é chamado Evregev, que salva o evento registrado
No objeto EVREGEV, salve uma chave como o evento registrado atual e o valor é uma matriz. Na matriz, coloque os parâmetros de configuração passados no método EV na ordem de primeiro e depois chegada. Observe que esta é uma matriz! ! ! Porque as matrizes podem economizar ordem, isso é muito importante
Há também um método anônimo chamado EVregfn, que salva os gatilhos do evento.
Podemos ver que o EVREGFN é um evento anônimo. No início, determinará se a janela variável global [me.constants.kit_event_stopimmediatepropagation] é == true. Se for verdade, ele retornará e não continuará a executar.
Em seguida, olhe para baixo, ele aceitará o objeto EV acionado pelo evento e anexará muitos objetos ao EV usando Mergeif, como Target, CurrentTarget, RelatedTarget, para resolver o problema de compatibilidade do navegador.
StopNow, StopDefault, Stopgoon são métodos criados para impedir que os eventos continuem a acionar.
O parágrafo a seguir é a chave para o EVEGFN. Vamos percorrer a matriz de eventos no EVREGEV criado antes, retirar os parâmetros de configuração passados no método EV anterior em ordem e executar o método no parâmetro de configuração. Se o valor de retorno do método não estiver vazio, ele retornará seu valor de retorno.
Finalmente, tornamos um navegador compatível e ligamos nosso método EVregfn Anonymous usando um método de evento de nível 2.
(V) Resumo
Simplificando, o Kit usa seu próprio método anônimo para armazenar em cache o identificador de registro de eventos e inserir uma matriz, para que possa se lembrar da sequência de eventos, além de fornecer uma entrada para descobrir os eventos, parâmetros, métodos etc. registrados anteriormente e, ao mesmo tempo, é compatível com compatibilidade do navegador.
(Vi) Evento de logout
Com o Kit Help Cache Event Handles, o log -out se torna simples
Você pode ver que o kit encontra a configuração de evento correspondente por meio de comparação direta, ou comparação fn.ToString, e fn.toString (). Trim () comparação e a exclui da matriz
(Vii) Aprimoramento do evento
Você deveria ter notado agora que o kit fez uma operação de mesclagem no objeto de evento do sistema. Primeiro de tudo, por que você precisa fazer Megerif? Como as propriedades do objeto do objeto de evento do sistema são revido e não podem ser substituídas, você só pode adicionar propriedades que ele não possui.
Então o kit só pode meterif. Todos sabemos que existe uma incompatibilidade do objeto de eventos do objeto de evento de cada navegador, então o kit precisa corrigir essa incompatibilidade. Por exemplo, o IE não possui um atributo de destino, apenas srcelement. Podemos adicionar atributo de destino para obter compatibilidade do padrão W3C
Obviamente, apenas o reparo não pode atender às nossas necessidades. Muitas vezes, ainda precisamos obter um pouco de ganho de peso para o objeto de evento.
Por exemplo, ao desenvolver touchdown e touchmove no iPhone, geralmente precisamos obter compensações de dedo único e para obter compensações de dedo único, Ev.TargetTouches [0] .ClientX, esse código, mas uma vez que a função anônima for assim, ela será incompatível no PC.
O que fazer? Não importa, podemos dar a mesclagem de objeto de eventos nossos próprios atributos
FirstFingerClientX, etc., para que possamos implementar facilmente o código unificado desenvolvido pelo Mobile e PC.
Incluindo, o próximo artigo falará sobre o HTML5 Drag and Drop e os eventos avançados de gestos são baseados nessa base.
Acrescente a isso, por que não o próprio evento como o ExtJS é porque
1. O objeto nativo do sistema tem uma certa relação de herança e não deseja ser destruída.
2. Se você usar seu próprio novo objeto, o código poderá não ser portador depois de estar fora da estrutura e o conteúdo do código precisa ser alterado novamente.