Leituras relacionadas:
Javascript Event Learning Resumo (v) Tipo de evento do mouse em JS
//www.vevb.com/article/86259.htm
Javascript Event Learning Resumo (i) Fluxo de eventos
//www.vevb.com/article/86261.htm
Javascript Event Learning Resumo (iv) Membros públicos do evento (propriedades e métodos)
//www.vevb.com/article/86262.htm
Javascript Event Learning Resumo (ii) JS Eventador de eventos
//www.vevb.com/article/86264.htm
Javascript Event Learning Resumo (iii) Objeto de evento JS
1. Eventos
Um evento é uma certa ação executada pelo próprio usuário ou navegador, como Click, Load e MouseOver, são todos os nomes do evento.
Os eventos são a ponte entre JavaScript e DOM.
Se você acionar, executarei o evento e chamarei sua função de processamento para executar o código JavaScript correspondente para dar a resposta.
Exemplos típicos são: o evento de carga é acionado após a carga da página; O usuário clica no elemento e aciona o evento de clique.
2. Fluxo de eventos
1. Consciência da influenza dos eventos
Pergunta: Clique no elemento da página, que tipo de elemento pode sentir esse evento?
Resposta: Ao clicar em um elemento, você também clica no elemento de contêiner do elemento ou mesmo em toda a página.
Exemplo: Existem três círculos concêntricos, adicione a função de manuseio de eventos correspondente a cada círculo e o texto correspondente aparece. Clique no círculo mais interno e também clique no círculo externo, para que o evento de clique do círculo externo também seja acionado.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <tittle> </title> </ad Head> <style> #outer {posição: absoluto; Largura: 400px; Altura: 400px; topo: 0; Esquerda: 0; Inferior: 0; Direita: 0; margem: automático; Background-Color: Deeppink; } #middle {Position: Absolute; Largura: 300px; Altura: 300px; TOP: 50%; margem -esquerda: -150px; Margin -top: -150px; Background-Color: DeepskyBlue; } #Inner {Position: Absolute; Largura: 100px; Altura: 100px; TOP: 50%; Esquerda: 50%; margem -esquerda: -50px; Margin -top: -50px; Background-Color: Darkgreen; Alinhamento de texto: centro; altura da linha: 100px; Cor: Branco; }#externo,#meio,#interno {Radio de borda: 100%; } </style> <body> <div id = "Outer"> <div id = "middle"> <div id = "interno"> Clique em mim! </div> </div> </div> <cript> var inercircle = document.getElementById ("interno"); inercircle.OnClick = function () {alert ("inercircle"); }; var middlecircle = document.getElementById ("Middle"); middlecircle.OnClick = function () {alert ("middlecircle"); } var outerCircle = document.getElementById ("Outer"); ExterCircle.OnClick = function () {alert ("OuterCircle"); } </script> </body> </html>Os efeitos são os seguintes:
2. Fluxo de eventos
Quando ocorre um evento, ele se propaga em uma ordem específica entre o nó do elemento e o nó raiz. Todos os nós que passam pelo caminho receberão o evento. Este processo de propagação é o fluxo de eventos DOM.
A ordem da propagação de eventos corresponde aos dois modelos de fluxo de eventos do navegador: Capture Event Stream e Bubble Event Stream.
Fluxo de eventos de bolhas: a propagação de eventos é da meta de evento mais específica até a meta de evento menos específica. Isto é, das folhas da árvore dom até a raiz.
Fluxo de eventos capturados: a propagação de eventos é da meta de evento menos específica para a meta de evento mais específica. Ou seja, das raízes da árvore Dom às folhas.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </ad head> <body> <div id = "mydiv"> clique em mim! </div> </body> </html>
No código HTML acima, clique no elemento <div> na página.
No fluxo de eventos borbulhantes, o clique em propagação de eventos é <div> -》 <body> -》 <html> -》 documento
No fluxo de eventos capturados, clique em PROPAGAÇÃO DE EVENTO O documento é documento -》 <html> -》 <body> -》 <div>
observação:
1) Todos os navegadores modernos suportam bolhas de eventos, mas existem pequenas diferenças nas implementações específicas:
No IE5.5 e anterior, as bolhas de eventos pularão o elemento <html> (saltará diretamente do corpo para o documento).
IE9, Firefox, Chrome e Safari Bubble eventos até o objeto da janela.
2) IE9, Firefox, Chrome, Opera e Safari Captura de eventos de suporte. Embora o padrão DOM exija que os eventos devam ser propagados a partir de objetos de documentos, esses navegadores começam a capturar eventos de objetos de janela.
3) Como os navegadores antigos não o sustentam, poucas pessoas usam captura de eventos. Recomenda -se usar bolhas de eventos.
DOM Stream de eventos
O padrão DOM usa Capture + Bubbling. Ambos os fluxos de eventos acionam todos os objetos do DOM, começando com o objeto de documento e terminando com o objeto Document.
O padrão DOM estipula que o fluxo de eventos inclui três estágios: estágio de captura de eventos, estágio no estágio de destino e estágio de bolha de eventos.
Fase de captura de eventos: o alvo real (<div>) não receberá eventos durante a fase de captura. Ou seja, no estágio de captura, o evento para do documento para <html> e depois para <body>. Na figura acima, é 1 ~ 3.
No estágio -alvo: o evento ocorre e é processado em <div>. Mas o processamento de eventos será visto como parte da fase borbulhante.
Fase de bolhas: os eventos se propagam de volta ao documento.
observação:
1): O padrão DOM estipula que a captura de captura de eventos envolve metas de eventos, mas os eventos nos objetos de eventos serão definidos no IE9, Safari, Chrome, Firefox, Opera9.5 e versões posteriores iniciarão eventos nos objetos de eventos durante a fase de captura. Como resultado, existem duas oportunidades para operar eventos no objeto de destino.
2): Nem todos os eventos passam pelo estágio da bolha. Todos os eventos passam pelo estágio de captura e estão no estágio de destino, mas alguns eventos ignoram o estágio da bolha: por exemplo, o evento de foco que obtém o foco de entrada e o evento Blur que perde o foco de entrada.
Exemplo de duas chances de operar eventos no objeto de destino:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <tittle> </title> </ad Head> <style> #outer {posição: absoluto; Largura: 400px; Altura: 400px; topo: 0; Esquerda: 0; Inferior: 0; Direita: 0; margem: automático; Background-Color: Deeppink; } #middle {Position: Absolute; Largura: 300px; Altura: 300px; TOP: 50%; margem -esquerda: -150px; Margin -top: -150px; Background-Color: DeepskyBlue; } #Inner {Position: Absolute; Largura: 100px; Altura: 100px; TOP: 50%; Esquerda: 50%; margem -esquerda: -50px; Margin -top: -50px; Background-Color: Darkgreen; Alinhamento de texto: centro; altura da linha: 100px; Cor: Branco; }#externo,#meio,#interno {Radio de borda: 100%; } </style> <body> <div id = "Outer"> <div id = "middle"> <div id = "interno"> Clique em mim! </div> </div> </div> <cript> var inercircle = document.getElementById ("interno"); innercircle.addeventListener ("clique", function () {alert ("O evento de clique do InnerCircle é disparado no estágio de captura");}, true); innercircle.addeventListener ("clique", function () {alert ("O evento de clique do InnerCircle é disparado no estágio da bolha");}, false); var middlecircle = document.getElementById ("Middle"); middlecircle.addeventListener ("clique", function () {alert ("evento de clique do Middlecircle é disparado no estágio de captura");}, true); middlecircle.addeventListener ("clique", function () {alert ("O evento de clique do Middlecircle é disparado no estágio da bolha");}, false); var outerCircle = document.getElementById ("externo"); ExterCircle.adDeventListener ("Click", function () {alert ("O evento de clique do OuterCircle é disparado no estágio de captura");}, true); OuterCircle.addeventListener ("Click", function () {alert ("O evento de clique do OuterCircle é disparado no estágio da bolha");}, false); </sCript> </body> </html>O efeito de operação é que 6 caixas aparecerão uma após a outra. Para explicar o princípio, eu o interi a uma foto:
3. Aplicação típica do fluxo de eventos - proxy de eventos
No processamento tradicional de eventos, um manipulador de eventos precisa ser adicionado a cada elemento. O JS Event Proxy é uma técnica simples e eficaz, através da qual você pode adicionar o processador de eventos ao elemento pai, evitando a adição do processador de eventos a vários elementos filho.
O princípio do proxy do evento usa bolhas de eventos e elementos de destino, adicione o processador de eventos ao elemento pai, aguarde o elemento filho para borbulhar eventos e o elemento pai pode determinar qual elemento filho é através do destino (ou seja, SRCELEMENT) e, assim, executar o processamento correspondente. Para obter mais conteúdo sobre a Target, consulte os exemplos a seguir para os membros públicos (propriedades e métodos) do evento (iv) para os exemplos a seguir.
Processamento tradicional de eventos, adicionando um manipulador de eventos a cada elemento, o código é o seguinte:
<Body> <l ud id = "color-list"> <li> vermelho </li> <li> laranja </li> <li> Amarelo </li> <li> verde </li> <li> azul </li> <li> Indigo </li> <li> roxo </li> </ul> <cript> (função () {var para colorlist = Colorlist. alerta (TargetElement.innerhtml);O método de processamento do agente de eventos é o seguinte:
<Body> <l ud id = "color-list"> <li> vermelho </li> <li> laranja </li> <li> Amarelo </li> <li> verde </li> <li> azul </li> <li> Indigo </li> <li> roxo </li> </ul> <cript> (função () {varlistlist = ColorList.AddeventListener ('Clique', ShowColor, FALSO); }}) (); </script> </body>Para resumir os benefícios do proxy do evento:
um. Reduza vários processadores de eventos para um, porque o processador de eventos deve residir na memória, o que melhora o desempenho. Imagine se houver uma tabela de 100 linhas, comparando a maneira tradicional de vincular manipuladores de eventos para cada célula com proxy do evento (ou seja, adicionar um manipulador de eventos à tabela), não é difícil concluir que o proxy do evento evita alguns riscos potenciais e melhorar o desempenho.
b. A DOM Update não requer reincidência no processador de eventos, porque o proxy do evento pode adotar diferentes métodos de processamento para diferentes elementos filhos. Se outros elementos filhos (a, span, div etc.) forem adicionados, você poderá modificar diretamente a função de manipulador de eventos do agente do evento. Não há necessidade de rebindar o processador e não há necessidade de fazer um loop novamente.
O exposto acima é o resumo do aprendizado de eventos JavaScript (i) Conhecimento relacionado sobre o streaming de eventos que o editor apresentou a você. Espero que seja útil para todos!