Este artigo resume os eventos JS DOM comuns para todos, que têm um certo valor de referência. Amigos interessados podem consultá-lo.
clique clique dblclick clique duplo menu de contexto clique com o botão direito do mouse sobre o elemento, é recomendado usar mouseenter em vez de mouseout o mouse sai do elemento, é recomendado usar mouseleave em vez de mouseenter o mouse está pairando sobre o elemento mouseleave o mouse deixa o elemento mousedown botão do mouse pressione mouseup botão do mouse levantar mousemove movimento do mouse
keydown botão do teclado pressionado keyup botão do teclado levantado keypress botão do teclado pressionado, usado para inserir teclas de caracteres
1. Quais elementos pode ouvir eventos de teclado?
① documento
② Elementos que podem receber foco (controles de formulário, especialmente elementos de entrada)
2. Qual é a diferença entre pressionar a tecla e pressionar a tecla?
① keydown pode ser acionado pressionando todas as teclas e não consegue distinguir entre teclas maiúsculas e minúsculas.
② O pressionamento de tecla só pode ser acionado quando a tecla que pode inserir caracteres é pressionada e as teclas podem diferenciar maiúsculas de minúsculas.
3. Como saber qual botão foi pressionado?
Use os atributos no objeto de evento:
evnet.keyCode obtém o valor ascii correspondente à chave
event.que é o mesmo que keyCode
event.key obtém o valor do caractere da chave.
carregamento do evento do documento será acionado quando tudo na página for carregado. Você pode ouvir a janela ou o elemento do corpo. só pode usar addEventListener para ouvir o evento beforeunload A diferença entre o evento load e o evento DOMContentLoaded que é acionado quando a página da web é fechada
:
① O evento load é acionado somente depois que tudo na página é carregado, incluindo elementos e externos. recursos.
② O evento DOMContentLoaded pode ser acionado quando todos os elementos da página são carregados, excluindo recursos externos.
de envio do formulário é acionado quando o formulário é enviado. Este evento escuta o elemento do formulário. reset é acionado quando o formulário é redefinido. Este evento escuta o foco do elemento é acionado quando o controle do formulário ganha foco quando o controle do formulário perde o foco. . change Para a caixa de entrada, só será acionado quando o conteúdo for alterado e o foco for perdido adequado para selecionar
carregar arquivo de imagem download concluído erro falha no carregamento de imagem
redimensionar monitora a janela e o tamanho da janela de visualização muda a rolagem; monitora a janela ou elementos com corpos de rolagem, acionado quando o conteúdo da página ou elemento é rolado.
Defina o primeiro parâmetro formal para a função de retorno de chamada do evento para obter o objeto evento.
Diferentes tipos de eventos obtêm diferentes tipos de objetos Event.
offsetX / offsetY Obtenha a posição coordenada do mouse no elemento de destino clientX / clientY Obtenha a posição coordenada do mouse na janela de visualização pageX / pageY Obtenha a posição coordenada do mouse na página screenX / screenY Obtém a posição das coordenadas do mouse na tela A posição das coordenadas do botão obtém qual botão do mouse foi pressionado, 0: botão esquerdo 1: botão do meio 2: botão direito
keyCode obtém o valor do código correspondente ao botão que é igual a keyCode key Obtém o valor do caractere correspondente à chave
type Obtém o nome do evento timeStamp Obtém o número de milissegundos a partir do momento em que o evento é acionado target Obtém o elemento alvo stopPropagation() Evita que o evento borbulhe preventDefault() Bloqueia o comportamento padrão
executando event.stopPropagation() na função de retorno de chamada do evento para evitar o borbulhamento.
Clicar no hiperlink para enviar e redefinir o formulário de salto, clicar com o botão direito para abrir o menu do sistema, etc...
chame event.preventDefault() na função de retorno de chamada do evento para evitar o comportamento padrão.
Nota: Se você usar o segundo método para escutar eventos,
return falsena função de retorno de chamada também poderá impedir o comportamento padrão.
evento delegado do evento escuta o elemento ancestral, determina o elemento de destino e executa operações relevantes se o elemento de destino atender às condições.
Vantagens da delegação de eventos:
Para ouvir o mesmo evento em um grande número de elementos, usar a delegação de eventos é mais eficiente do que percorrer e ouvir um por um.
Usar a delegação de eventos permite que novos elementos respondam aos eventos.
Recomendações relacionadas: [tutorial em vídeo JavaScript]
O texto acima é o resumo mais recente dos eventos DOM JavaScript comuns! Para mais detalhes, preste atenção a outros artigos relacionados no site php chinês!
