Processamento de eventos Javascript: um entendimento profundo de this palavra -chave e mecanismo de processamento de eventos

aplicativos da Web do cliente eficiente não podem ser separados do mecanismo de processamento de eventos JavaScript. Os eventos permitem que o JavaScript detecte o comportamento do usuário, como o mouse, clicando em links, rolagem de página, redimensionamento de janelas, objetos de arrasto etc. Seu código JavaScript pode registrar um manipulador de eventos que aciona quando ocorre um evento específico. A maioria dos navegadores passará um único objeto que contém informações de evento para a função, como informações importantes, posição do cursor do mouse etc. Você pode executar certas ações, como elementos de animação, iniciar uma solicitação de Ajax ou bloquear o comportamento padrão do navegador. Além disso, a palavra -chave this também pode ser definida. Normalmente, isso aponta para o elemento que aciona o evento, mas nem sempre é o caso.

Evite usar manipuladores de eventos em linha

]

Os manipuladores de eventos embutidos (por exemplo, clique em mim ) são simples, mas têm muitas desvantagens: elas são altamente restritivas, desajeitadas e podem inchar o código HTML. Como as chamadas e manipuladores de eventos são definidos em diferentes locais, é complicado de manter. Finalmente, como os eventos podem ser chamados quando a página carrega, as tags de script devem ser colocadas na parte superior do HTML, não na parte inferior.

Evento tradicional DOM0 ]

Métodos de manuseio de eventos tradicionais (por exemplo,

link.onClick = EventHandler; ) podem receber apenas um manipulador por tipo de evento. Nota: Não use link.onClick = EventHandler (); , isso executará imediatamente a função EventHandler e atribuirá o valor de retorno (indefinido) ao onclick Attribute do #link Isso não relatará um erro, mas seu manipulador nunca será chamado quando o evento de cliques ocorrer.

Modern DOM2 Events ]

processamento de eventos modernos permite que vários manipuladores sejam especificados para o mesmo evento. No entanto, devido a algumas diferenças na implementação entre Microsoft e W3C, apenas IE9 e Suporte acima

addEventListener () . Podemos usar a detecção de objetos para criar um evento de navegador cruzado função adicional:

ATCHEVENT (link, "Clique", EventHandler); função AnexeEvent (elemento, tipo, manipulador) { if (element.addeventListener) element.addeventListener (tipo, manipulador, false); else element.attachevent ("on" tipo, manipulador); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

Semelhante ao evento DOM0, todos os navegadores estão definidos

this como o elemento que desencadeia o evento ... exceto IE8 e abaixo. No ie8 e abaixo, this é sempre um objeto global objeto. Felizmente, podemos determinar o elemento de destino a partir do objeto de evento:

função EventHandler (e) { e = e || Window.Event; VAR Target = E.Target || E.Srcelement; console.log (Target); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

O significado da palavra -chave this no Javascript Event Handler ]

this palavra -chave refere -se ao contexto em que a função é chamada. Em um manipulador de eventos, este geralmente aponta para o elemento HTML que anexa o manipulador de eventos. Isso permite acessar e manipular elementos diretamente.

como usar this no manipulador de eventos

usando

this é simples, assim como usar outras variáveis. Lembre -se, this aponta para o elemento html do manipulador de eventos anexado.

diferentes tipos de eventos em javascript

javascript suporta vários eventos como

click , mouseover , mouseout , keydown , keyup ? como anexar um manipulador de eventos a um elemento

você pode anexar um manipulador de eventos a um elemento usando o método

addEventListener . Este método aceita dois parâmetros: o nome do evento a ser ouvido e a função a ser executada quando o evento ocorrer.

objeto de evento em javascript

Objeto de evento é um objeto especial criado quando ocorre um evento. Este objeto contém informações sobre eventos, como tipo de evento, elemento de destino, tempo de ocorrência de eventos, etc. Você pode acessar objetos de evento nas funções de manipulador de eventos.