Os eventos são um método de implementação de programação assíncrona, essencialmente a comunicação entre vários componentes do programa e o DOM suporta um grande número de eventos;
Este artigo usa esses pontos para analisar os princípios básicos do processamento de eventos em detalhes: tipo de evento, destino de eventos, manipulador de eventos, objeto de eventos, propagação de eventos
Finalmente, apresentarei o objeto de evento para você;
1. Tipo de evento: é uma corda minúscula completa usada para indicar que tipo de evento ocorreu, como 'mouseOver'
Tipos de eventos tradicionais: eventos de formulário, eventos de janela, eventos de mouse, eventos de teclado, eventos DOM, eventos HTML5, tela de toque e eventos de dispositivos móveis, etc.
2. Alvo de eventos: o objeto que aciona o evento
3. ouvinte de eventos: uma função que lida ou responde a eventos. Quando um objeto aciona um evento, o navegador chama automaticamente a função registrada no objeto;
Registre o manipulador de eventos (ouça os eventos):
1. Registre -se como atributos HTML (ele será acionado apenas na fase de borbulhamento) como <tabela id = "t" onclick = "modifyText ();">; e alguns tipos de eventos geralmente são acionados diretamente no navegador, e não em qualquer elemento de documento específico. Esses manipuladores de eventos são colocados na tag <body>, mas o navegador os registrará no objeto da janela, como <corpo onload = "alert ('hello world!')">, E esses eventos incluem:
OnAfterprint onfocus onOnline onResize on Beforeprint onhashchange
OnPageHide OnStorage OnBeforeUnload OnLoad OnPageshow Onundo
OnBlur onMessage Onpopstate OnUnload OneError ONOFFLINE ONREDO
O valor do evento como um atributo HTML é uma sequência de código JS, que é o corpo da função de processamento e não contém {}. Nota: Tente não registrar eventos em nenhuma outra tag HTML, ele viola o princípio da separação do código HTML e JavaScript. Se a função de evento puder clicar no elemento do objeto de evento antes de ser carregado, isso causará um erro;
2. Registre -se como um atributo do elemento DOM (ele será acionado apenas no estágio da bolha). Neste momento, o nome do atributo manipulador de eventos precisa ser prefixado com 'on'. Este método é compatível com todos os navegadores. A única desvantagem é que ele só pode registrar uma função de manipulador de eventos. Se o atributo onclick for definido duas vezes, a última definição substituirá a anterior; por exemplo: window.onload = function () {...};
3. Em todos os navegadores, exceto o IE8 e as versões anteriores, as operações de evento (escuta e acionamento) do DOM são definidas na interface EventTarget. Essa interface é implantada para o nó do elemento, o nó de documento e o objeto de janela. Além disso, os objetos internos do navegador, como xmlHttPrequest, Audionode, Audiocontext, etc. também implantaram essa interface. Existem três métodos dessa interface, AddEventListener e RemowEventListener são usados para vincular e remover as funções do ouvinte, e o DispatchEvent é usado para acionar eventos;
O método AddEventListener (tipo, ouvinte, booleano) é usado para registrar o ouvinte. O terceiro parâmetro define o método de propagação do evento. Geralmente, o valor padrão false é usado, o que significa que a função de escuta é acionada apenas no estágio da bolha (filhote). Quando definido como true, significa que a função de escuta é acionada no estágio de captura (captura); Quaisquer vários ouvintes podem ser registrados para o mesmo evento de tipo no mesmo objeto, e todos os ouvintes serão acionados na Ordem de Registro (os ouvintes de registro serão ignorados pelo navegador);
Se você deseja passar os parâmetros para a função de escuta, envolva a função de escuta com funções anônimas, como Elm.adDeventListener ('Click', function () {Listen ('Real argumentos')}, false);
Quando o ouvinte registrado é uma variável de referência para a função, você pode usar o RemoneventleStener (tipo, ouvinte, booleano) para excluir o ouvinte no destino do evento. Os eventos da bolha e os eventos de captura do mesmo evento de escuta precisam ser excluídos separadamente, e os dois não interferem entre si;
var div = document.getElementById ('div'); var ouvinte = function (event) { / * faça algo aqui * /}; div.AddeventListener ('clique', ouvinte, false); div.removeEventListener ('clique', ouvinte, false);O método DishatchEvent (Evento) aciona manualmente o evento especificado no nó atual, acionando assim a execução da função de escuta. Este método retorna um valor booleano. Enquanto uma função de escuta chama event.preventDefault (), ele retorna false. Caso contrário, é verdade. O parâmetro é uma instância de um objeto de evento. O parâmetro não pode estar vazio e deve ser um objeto de evento válido, caso contrário, um erro será relatado.
btn.addeventListener ('clique', ouvinte, false);
var e = novo evento ('clique');
btn.dispatchEvent (e); // O evento de clique é imediatamente acionado no BTN, e o ouvinte será chamado imediatamente
O exemplo a seguir determina se o evento foi cancelado com base no valor de retorno do método DispatchEvent.
var cancelado =! btn.dispatchEvent (evento);
if (cancelado) {console.log ('event cancel'); }
else {console.log ('evento não cancelado'); }}
4. O IE8 e as versões anteriores suportam apenas o AnextEvent (tipo, ouvinte) e destacar (tipo, ouvinte). O uso deles e o addEventListener são diferentes: a. Existem apenas dois parâmetros; b. O tipo de parâmetro deve ser prefixado com 'on'; c. Permite o registro repetido do mesmo evento de escuta e será chamado; d. Há uma desvantagem em usar o método AnextEvent, que é que o valor disso se tornará um objeto de janela em vez do elemento que desencadeia o evento;
Questões de pedido de chamada: 1). Os manipuladores registrados definindo as propriedades do objeto ou os atributos HTML são sempre chamados primeiro;
2). Os manipuladores registrados no AddEventListener são chamados em sua ordem de registro;
3). Os manipuladores registrados no AnextEvent no Legacy IE podem ser chamados em qualquer ordem.
Problema de valor de retorno:
1). O valor de retorno do manipulador de eventos é significativo apenas para o manipulador registrado através de atributos. Registrando o valor de retorno do manipulador de eventos, definindo o atributo de objeto ou o atributo HTML como false é dizer ao navegador para não executar as operações padrão relacionadas a este evento. Quando o navegador deseja pular para uma nova página, o evento OnBeforeUnload do objeto da janela é acionado. Se seu valor de retorno for uma string, ele aparecerá na caixa de diálogo Confirmação da consulta;
2) .AddeventListener () ou AnexeEvent () Registre o manipulador de eventos. Para cancelar a operação padrão do navegador, você deve chamar o método DeventDefault () ou definir a propriedade ReturnValue do objeto de evento.
Isso aponta para o problema:
1). A função de escuta especificada pelo método addEventListener, o interno esse objeto sempre aponta para o nó que aciona o evento;
2). Esta da função manipuladora de eventos registrada pelo IE8 e os métodos anteriores do ApptlementEvent aponta para o objeto global;
Todo esse objeto escrito da seguinte maneira aponta para o nó elemento.
element.OnClick = print;
Element.addeventListener ('Click', Print, False)
element.OnClick = function () {console.log (this.id);}
<elemento onclick = "console.log (this.id)">
Esse objeto da seguinte maneira aponta para o objeto global.
element.OnClick = function () {Dosomething ()};
element.setAtAttribute ('OnClick', 'Dosomething ()');
<elemento onclick = "Dosomething ()">
Element.attachevent ('OnClick', doSomething) // ie8
Problema de memória: para o código a seguir, uma nova função anônima será criada em cada loop e a memória será consumida cada vez mais; Como não é mantido para a referência à função anônima, não pode ser chamado de removevEventListener; Portanto, o segundo ouvinte de parâmetro deve ser mantido como uma referência à função de evento de processamento;
for (i = 0; i <els.length; i ++) {els [i] .addeventListener ("clique", function (e) {/*faça algo*/}, false}); }Funções de ferramentas de uso geral que são compatíveis com o IE mais antigo:
Certifique -se de que essa função de ferramenta addevent do manipulador de eventos aponte para o objeto de destino do evento
função addEvent (destino, tipo, func) {if (Target.adDeventListener) {Target.adDeventListener (tipo, func, false); } else {Target.attachevent ('on'+tipo, function (e) {// A função de processamento registrada pelo anexo aqui não está vinculada a uma referência, por isso é impossível usar o destacar para excluir o retorno func.call (alvo, e);}); }}Manipulador de eventos gerais (por causa do IE8 e versões anteriores, o manipulador de propriedade como o alvo do evento precisa da janela.
function func (evento) {var event = event || window.event; var no destino = event.Target || Event.srcelement; Código ///0tHler}4. Propagação de eventos: é o processo pelo qual o navegador decide qual objeto desencadeia seu manipulador de eventos.
O fluxo de eventos especificado no "Evento do nível DOM2" inclui três estágios: estágio de captura de eventos ==> no estágio de destino ==> estágio de bolha de eventos. A primeira coisa que acontece é a fase de captura de eventos (propagação da camada externa para a camada interna), que oferece uma oportunidade para todos os nós que o evento passa para interceptar eventos. Depois, há o evento de recepção de destino real (executa na ordem de registro). O último estágio é o estágio de borbulha (borbulhando da camada interna para a camada externa).
Quando os elementos de contêineres e elementos aninhados, ou seja, quando os manipuladores de eventos são chamados no estágio de captura e no estágio da bolha: o evento executa os manipuladores de eventos na ordem do fluxo de eventos DOM e, quando o evento está no estágio de destino, a ordem das chamadas de evento é determinada pela ordem de redação do evento de ligação
Se você deseja que o evento alcance um determinado nó e não seja mais se propagar, existem duas maneiras:
1. Use o método Event.stopPropagation () do objeto de evento para impedir a propagação da função de escuta atual;
2. Use o método Event.StopImediatePropagation () do objeto de evento para impedir a propagação de todas as funções de escuta do evento atual em seu objeto de evento;
Delegação de eventos: como os eventos se propagam para cima para o nó pai no estágio da bolha, a função auditiva do nó filho pode ser definida no nó pai e a função auditiva do nó pai pode lidar com eventos de vários elementos filhos uniformemente;
5. Objeto de evento (evento): Após a ocorrência do evento, um objeto de evento será gerado e passado como um parâmetro para a função de escuta. O navegador fornece nativamente um objeto de evento, e todos os eventos são instâncias desse objeto ou herda o objeto Event.Prototype. O próprio objeto de evento é um construtor que pode ser usado para gerar novas instâncias.
var ev = novo evento ("look", {"bubbles": true, "cancelável": false});
document.dispatchEvent (EV);
O construtor de eventos aceita dois parâmetros. O primeiro parâmetro é uma string, indicando o nome do evento; O segundo parâmetro é um objeto, indicando a configuração do objeto de evento. Este parâmetro pode ter as duas propriedades a seguir.
Bolhas: Valor booleano, opcional, o padrão é falso, indicando se o objeto de evento está borbulhado.
Cancelável: valor booleano, opcional, o padrão é falso, indicando se o evento pode ser cancelado.
Propriedades do objeto de evento:
1. Relacionado ao estágio do evento:
Bolhas: propriedade somente leitura, retorna um valor booleano, indicando se o evento atual borbulhará. Diferentes funções podem ser chamadas com base no fato de o evento borbulhar.
Eventphase: retorna um valor inteiro (um dos 0,1,2,3), indicando o estado atual do evento
<0, o evento ainda não ocorreu.
<1, o evento está atualmente no estágio de captura, ou seja, está no processo de propagação do nó ancestral para o nó de destino. O processo é do objeto da janela para o nó do documento e, em seguida, para o nó HTMLHTMLELEMENT, até o nó pai do nó de destino.
<2, o evento atinge o nó de destino, ou seja, o nó apontado pelo atributo de destino.
<3, o evento está no estágio da bolha, isto é, no processo de propagação traseira do nó de destino ao nó ancestral. Esse processo é do nó pai até o objeto da janela. Este estágio só pode ocorrer se o atributo de bolhas for verdadeiro
2. Relacionado ao comportamento padrão dos eventos:
Cancelável: retorna um valor booleano indicando se o evento pode ser cancelado. Se você deseja cancelar um evento, precisará ligar para o método PreventDefault neste evento
DefaultPreventEd: Retorna um valor booleano indicando se o método PreventDefault foi chamado.
3. Relacionado ao nó alvo do evento:
CurrentTarget: Retorna o nó ligado à função de escuta da execução do evento.
Alvo: retorna o nó que acionou o evento. No IE6-IE8, o nome desta propriedade não é um alvo, mas um srcelement
4. Relacionado a outras informações sobre o objeto de evento:
Tipo: Retorna uma string representando o tipo de evento
Detalhe: retorna um valor numérico que representa algumas informações sobre o evento. O significado específico está relacionado ao tipo de evento. Para eventos do mouse, significa que o número de vezes que o botão do mouse é pressionado em uma determinada posição. Por exemplo, para eventos dblClick, o valor do atributo detalhado é sempre 2.
Timestamp: retorna um registro de data e hora de milissegundos, indicando o tempo em que o evento ocorreu. O cálculo começa no performancetiming.navigationstart, o que significa o tempo necessário para o usuário navegar para a página da web. Se você deseja converter esse valor em um registro de data e hora da Epoch, precisa calcular o evento.timestamp + performance.timing.navigationstart
ISTRUSTED: Retorna um valor booleano indicando se o evento é confiável. Não é muito útil, o suporte a navegadores diferentes é diferente.
Métodos de objeto de evento:
PreventDefault (): cancela o comportamento padrão do navegador para o evento atual. A premissa para esse método entrar em vigor é que a propriedade cancelável do evento é verdadeira. Se falso, chamar esse método não tem efeito.
StopPropagation (): encerrar o evento para se propagar ainda mais durante a captura, o processamento do alvo ou o estágio da bolha do processo de propagação. Depois de chamar esse método, o manipulador no nó que lida com o evento será chamado e o evento não será mais despachado para outros nós. Nota: Este método não pode impedir que outras alças de eventos no mesmo nó de documento sejam chamadas, mas pode impedir que os eventos sejam despachados para outros nós.
StopImediatePropagation (): impede que outras funções de escuta sejam chamadas no mesmo evento. Enquanto uma das funções de escuta chamar o método, as outras funções de escuta não serão executadas novamente.
Link de referência:
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
Guia de JavaScript autoritário 6ª edição
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.