Recentemente, como tenho que modificar o site todos os dias para fazer efeitos especiais para o site, assisti a muitos incidentes de contato com JS. Eu só sei como usar uma pequena parte dela. Às vezes, também é bastante caótico quando eu o uso. Agora eu resolvi isso. Vou compartilhar com a plataforma de rede Wulin para sua referência!
1. O que é um evento JavaScript?
Os eventos são o coração espancado dos aplicativos JavaScript e a cola que cola tudo junto. Quando temos certos tipos de interações com as páginas da Web no navegador, os eventos acontecem.
Os eventos podem estar clicando em determinado conteúdo, passando por um elemento específico ou pressionando certas teclas no teclado, e os eventos também podem ser algo que acontece em um navegador da web, como um determinado carregamento da página da web ou o usuário rolando a janela ou alterando o tamanho da janela. Para ser franco, os eventos são momentos de interação específicos que ocorrem em um documento ou navegador!
Ao usar o JavaScript, você pode ouvir eventos específicos e especificar que certos eventos ocorrem em resposta a eles.
2. Fluxo de eventos
O fluxo de eventos descreve a ordem dos eventos aceitos na página. Nos estágios iniciais do desenvolvimento do navegador, dois principais fabricantes de navegadores, ou seja, o Netscape lutaram entre si, e ocorreu uma situação de trapaça, ou seja, sua interpretação do fluxo de eventos mostrou duas definições completamente opostas. É com isso que estamos familiarizados: ou seja, bolhas de eventos, captura de eventos Netscape. Vamos tirar uma foto primeiro e dar uma breve olhada na estrutura:
1. Bolhas de eventos
Bolhas de evento significa que o evento é recebido pela primeira vez pelo elemento mais específico (o nó com o nível de nidificação mais profundo no documento) e, em seguida, propaga -se passo a passo para o nó menos específico (o documento). Pegue o diagrama acima para ilustrar que, ao clicar na parte do texto, ele é recebido pela primeira vez pelo elemento no texto e, em seguida, se propaga para a janela passo a passo, ou seja, o processo de 6-7-8-9-10 é executado.
2. Captura de eventos
A captura de eventos significa que o evento é recebido pela primeira vez por um nó menos específico, e o nó mais específico finalmente recebe o evento. Da mesma forma, no modelo acima, ao clicar na parte do texto, ele é recebido pela janela pela primeira vez e depois se propaga para o elemento de texto passo a passo, ou seja, o processo de 1-2-3-4-5 é executado.
Como ele funciona no código? Dado mais tarde!
3. Três maneiras de lidar com o evento JavaScript
Quando ocorre um evento, temos que lidar com isso. Existem três maneiras principais de lidar com os manipuladores de eventos JavaScript:
1. Manipulador de eventos HTML
Ou seja, adicionamos diretamente manipuladores de eventos ao código HTML, como o código a seguir:
<input id = "btn" value = "button" type = "button" onclick = "showmsg ();"> <cript> function showmsg () {alert ("html adicionar processamento de eventos"); } </script>A partir do código acima, podemos ver que o processamento do evento está diretamente aninhado em elementos. Há um problema com isso: o acoplamento entre o código HTML e o JS é muito forte. Se você deseja alterar o SHOWMSG no JS um dia, não apenas precisará modificá -lo no JS, mas também precisará modificá -lo no HTML. Podemos aceitar uma ou duas modificações, mas quando seu código atingir o nível de 10.000 linhas, isso custará às pessoas e dinheiro para modificá -lo. Portanto, não recomendamos este método.
2. Manipulador de eventos de nível DOM0
Ou seja, adicione o processamento de eventos ao objeto especificado, consulte o seguinte código:
<input id = "btn" value = "button" type = "button"> <cript> var btn = document.getElementById ("btn"); btn.OnClick = function () {alert ("Processamento de eventos de adição de nível DOM"); } btn.onClick = null; // Se você deseja excluir o evento de clique da BTN, defina -o como null </sCript>A partir do código acima, podemos ver que o acoplamento entre os eventos no nível DOM0, o código HTML e o código JS foi bastante reduzido em comparação com os manipuladores de eventos HTML. No entanto, os programadores inteligentes ainda não estão satisfeitos e esperam encontrar uma maneira mais simples de lidar com isso. Vamos dar uma olhada no terceiro método.
3. Manipulador de eventos de nível DOM2
O DOM2 também está adicionando manipuladores de eventos a objetos específicos, mas envolve principalmente dois métodos, que são usados para lidar com operações de especificação e exclusão de manipuladores de eventos: addEventListener () e removeventListener (). Todos eles recebem três parâmetros: o nome do evento a ser processado, a função como manipulador de eventos e um valor booleano (se o evento é processado no estágio de captura), consulte o seguinte código:
<input id = "btn" value = "button" type = "button"> <cript> var btn = document.getElementById ("btn"); btn.addeventListener ("clique", showmsg, false); // aqui definimos o último valor como false, ou seja, ele não é processado no estágio de captura. De um modo geral, o processamento de bolhas é mais compatível em cada função do navegador showsg () {alert ("Dom-Level Add Event Handler"); } btn.removeEventListener ("clique", showmsg, false); // Se você deseja excluir este evento, você só precisa passar o mesmo parâmetro </sCript>Aqui podemos ver que, ao adicionar e remover eventos, o último método é mais direto e simples. No entanto, Ma Hixiang lembra a todos que, ao processar o evento Delete, os parâmetros passados devem ser consistentes com os parâmetros anteriores, caso contrário, a exclusão será inválida!
4. O processo e a diferença entre bolhas e captura de eventos
Dito isto, deixe -me dar algum código para explicar o processo de bolhas de eventos e captura de eventos e, ao mesmo tempo, permita que você veja a diferença entre os dois:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <title> document </ititle> <ylem> #p {width: px; altura: px; borda: px RELD; www.mahaixiang.cn <div id = "c"> eu gosto de www.mahaixiang.cn </div> </div> <cript> var p = document.getElementById ('p'); var c = document.getElementById ('c'); c.AddeventListener ('Click', function () {alert ('Child Node Capture')}, true); c.AddeventListener ('Click', function () {alert ('Child Node Bubbles')}, false); P.AddeventListener ('Click', function () {alert ('Child Node Bubbles')}, false); </script> </body> </html>Ao executar o código acima e clicar no elemento filho, descobriremos que a ordem de execução é: Bubble de nó captura do nó Capture-Child-Capture-Child-Capture-Child-filho. A partir deste exemplo, podemos entender que, além disso, o evento de nível DOM2 estipula que os eventos incluem três estágios:
1. Estágio de captura de eventos;
2. No estágio -alvo;
3. O estágio da bolha do evento.
Primeiro, é captura e depois no estágio de destino (ou seja, para o local onde o evento é emitido) e, finalmente, é borbulhado. O que não é científico é que não existe um programa de manuseio de eventos no nível DOM1. Por favor, preste atenção e pare de fazer piadas!
5. Suplemento
1. O manipulador de eventos do IE também possui dois métodos: AnexeEvent () adiciona eventos e o Detachevent () exclui eventos. Esses dois métodos recebem os mesmos dois parâmetros: o nome do manipulador de eventos e a função de processamento de transações. Por que não há valor booleano aqui? Como o IE8 e as versões anteriores suportam apenas as bolhas de eventos, o último parâmetro é equivalente a false por padrão para manipular! (Os navegadores que suportam os manipuladores de eventos do IE incluem o IE, Opera).
2. Objetos de eventos são objetos usados para registrar informações relevantes quando alguns eventos ocorrem, mas os objetos do evento só serão gerados quando ocorrerem eventos e só podem ser acessados internamente pela função Handler de eventos. Depois que todas as funções do manipulador de eventos são executadas, o objeto de evento é destruído!
O exposto acima é a maneira de lidar com eventos JavaScript (três tipos) introduzidos a você pelo editor. Espero que seja útil para você!