Este artigo traz conhecimentos relevantes sobre JavaScript. Ele apresenta principalmente um resumo simples de eventos que são alguns momentos interativos específicos que ocorrem em documentos ou janelas do navegador. .
[Recomendações relacionadas: tutorial em vídeo javascript, front-end da web]
Eventos são momentos específicos de interação que ocorrem dentro de um documento ou janela do navegador. A interação entre JavaScript e HTML é obtida por meio de eventos. Para aplicativos da Web, existem os seguintes eventos representativos: eventos de clique, eventos de entrada e saída do mouse, eventos de pressionamento/pop-up do teclado, etc. Eventos são momentos específicos de interação que ocorrem em um documento ou janela do navegador. Você pode usar ouvintes (ou manipuladores de eventos) para assinar eventos para que o código apropriado seja executado quando o evento ocorrer.
Aqui está uma breve introdução aos seguintes eventos comumente usados: eventos de carregamento de documentos, objetos de eventos, bolhas de eventos, delegação de eventos, vinculação de eventos, propagação de eventos e eventos de teclado.
Evento de carregamento de documento (onload): O evento onload é acionado após o carregamento de toda a página. Use conforme mostrado:
Do ponto de vista do desempenho, é melhor escrevê-lo no final da página! O código js é escrito na parte inferior da página para garantir que a página foi carregada quando o código for executado. window.onload só pode aparecer uma vez na página e o código subsequente substituirá o código anterior.
Objeto de evento: após a ocorrência do evento, um objeto de evento será gerado e passado para a função de escuta como parâmetro. O desempenho específico é que passamos um parâmetro de evento na função de retorno de chamada, e o valor desse parâmetro é passado automaticamente por JS. Este objeto de evento conterá todas as informações relevantes sobre este evento, incluindo qual evento (mouse/teclado) é, o acionador do evento, o alvo do evento, etc.
Quando um evento no objeto DOM é acionado, um objeto de evento Event é gerado, que contém todas as informações relacionadas ao evento. Inclui os elementos que causaram o evento, o tipo de evento e outras informações relacionadas ao evento específico. Os navegadores padrão DOM passarão um objeto de evento para o manipulador de eventos. Qualquer que seja o manipulador de eventos, um objeto de evento é passado. O objeto Event contém propriedades e métodos relacionados ao evento específico que o criou. Os tipos de eventos acionados são diferentes e as propriedades e métodos disponíveis também são diferentes. Aqui está uma breve introdução aos eventos de mouse/teclado, conforme mostrado na figura:
O objeto de evento no IE é diferente de acessar o objeto de evento no DOM. Existem várias maneiras diferentes de acessar o objeto de evento no IE, dependendo de como você especifica o manipulador de eventos. No IE, o objeto de evento existe como um atributo do objeto de janela. Você pode usar window.event para obter o objeto de evento. Ao usar attachmentEvent(), um objeto de evento também será passado no manipulador ou pode ser usado em. a maneira anterior. Aqui está um caso para ilustrar: quando o mouse está sobre a caixa, a tag p abaixo exibe as coordenadas atuais do mouse.
Renderização:
Diagrama de código:
Borbulhamento de eventos (Bubble): O chamado borbulhamento refere-se à propagação ascendente de eventos. Quando um evento em um elemento descendente é acionado, o mesmo evento em seu elemento ancestral também será acionado. Bolhas são úteis na maioria das situações de desenvolvimento. Se você não quiser que o borbulhamento ocorra, você pode cancelá-lo por meio do objeto de evento event.cancelBubble=true.
Renderização:
Diagrama de código:
Delegação de eventos: refere-se a vincular eventos aos elementos ancestrais comuns dos elementos, de modo que quando um evento em um elemento descendente for acionado, ele irá borbulhar para o elemento ancestral, e o evento será processado por meio da função de resposta do ancestral elemento. A delegação de eventos usa bolhas. A delegação pode reduzir o número de ligações de eventos e melhorar o desempenho do programa. O atributo target do objeto de evento: retorna o elemento que disparou este evento (o nó alvo do evento)
Caso:
Renderização:
Diagrama de código:
Vinculação de eventos: podemos vincular manipuladores de eventos a um elemento de duas maneiras comuns: vinculação especificando atributos de evento de elementos HTML; vinculação especificando atributos de objetos DOM; Existe outra maneira especial chamada configuração de ouvinte de evento, objeto de elemento: addEventListener(). Os dois primeiros métodos podem vincular manipuladores de eventos, mas ambos têm a desvantagem de só poderem vincular um programa e não podem vincular vários programas para um evento. addEventListener(), através deste método você também pode vincular uma função de resposta a um elemento. Use addEventListener() para vincular várias funções de resposta ao mesmo evento de um elemento ao mesmo tempo. Desta forma, quando o evento for acionado, a função de resposta será executada na ordem de ligação da função. Este método não oferece suporte aos navegadores IE8 e anteriores e, em vez disso, você precisa usar attachmentEvent. attachmentEvent(), no IE8 você pode usar attachmentEvent() para vincular eventos. Este método também pode vincular várias funções de processamento a um evento ao mesmo tempo. A diferença é que ele é vinculado e executado primeiro. A ordem de execução é oposta a addEventListener().
Propagação de eventos: A propagação de eventos pode ser dividida em três estágios: estágio de captura - no estágio de captura, os eventos são capturados do elemento ancestral mais externo para o elemento alvo, mas por padrão o evento não será acionado neste momento; o evento é capturado O elemento alvo começa a disparar eventos no elemento alvo após a conclusão da captura; o estágio de bolha - o evento é transmitido do elemento alvo para seus elementos ancestrais, disparando eventos nos elementos ancestrais por sua vez.
Eventos de teclado: onkeydown: Evento de teclado pressionado. Se você continuar pressionando uma tecla sem soltá-la, o evento sempre será acionado. Quando o evento onkeydown for acionado continuamente, o intervalo entre a primeira e a segunda vez será um pouco maior e as demais serão muito rápidas. Isto é para evitar o uso indevido. onkeyup: evento quando o teclado é liberado. Os eventos do teclado geralmente estão vinculados a alguns objetos que podem obter foco ou documentos...
O texto acima é um breve resumo dos detalhes dos eventos JavaScript. Para obter mais informações, preste atenção a outros artigos relacionados na rede de código-fonte!