Qual é a precedência do evento em JavaScript?

Que ordem de precedência são events tratados em JavaScript?

Aqui estão os events em ordem alfabética …

  1. onabort – O carregamento de uma imagem é interrompido
  2. onblur – Um elemento perde o foco
  3. onchange – O usuário altera o conteúdo de um campo
  4. onclick – o mouse clica em um object
  5. ondblclick – Mouse clica duas vezes em um object
  6. onerror – Ocorre um erro ao carregar um documento ou uma imagem
  7. onfocus – Um elemento recebe foco
  8. onkeydown – Uma tecla do teclado é pressionada
  9. onkeypress – Uma tecla do teclado é pressionada ou pressionada
  10. onkeyup – Uma tecla do teclado é liberada
  11. onload – Uma página ou uma imagem terminou de carregar
  12. onmousedown – Um botão do mouse é pressionado
  13. onmousemove – O mouse é movido
  14. onmouseout – O mouse é movido de um elemento
  15. onmouseover – O mouse é movido sobre um elemento
  16. onmouseup – Um botão do mouse é liberado
  17. onreset – O botão de reset é clicado
  18. onresize – Uma janela ou quadro é redimensionado
  19. onselect – o texto está selecionado
  20. onsubmit – O botão de envio é clicado
  21. onunload – O usuário sai da página

Que ordem eles são tratados fora da fila de events?

A precedência não é first-in-first-out (FIFO), ou pelo menos eu acredito.

Isso não era, até onde sei, explicitamente definido no passado. Navegadores diferentes estão livres para implementar a ordenação de events da maneira que acharem melhor. Embora a maioria esteja perto o suficiente para todos os fins práticos, tem havido e continuam a existir alguns casos estranhos em que os navegadores diferem um pouco (e, claro, muitos mais casos em que certos navegadores não conseguem enviar determinados events).

Dito isso, a recomendação de rascunho do HTML 5 faz uma tentativa de especificar como os events serão enfileirados e enviados – o loop de events :

Para coordenar events, interação do usuário, scripts, renderização, rede e assim por diante, os agentes do usuário devem usar os loops de events conforme descrito nesta seção.

Deve haver pelo menos um loop de events por agente de usuário e, no máximo, um loop de events por unidade de contextos de navegação de origem semelhante relacionados.

Um loop de events possui uma ou mais filas de tarefas. Uma fila de tarefas é uma lista ordenada de tarefas […] Quando um agente do usuário deve enfileirar uma tarefa, ela deve include a tarefa determinada em uma das filas de tarefas do loop de events relevante. Todas as tarefas de uma fonte de tarefas específica devem sempre ser adicionadas à mesma fila de tarefas, mas as tarefas de fonts de tarefas diferentes podem ser colocadas em filas de tarefas diferentes. […]

[…] um agente do usuário pode ter uma fila de tarefas para events de mouse e chave (a origem da tarefa de interação do usuário) e outra para todo o resto. O agente do usuário poderia dar preferência a events de teclado e mouse sobre outras tarefas três quartos do tempo, mantendo a interface responsiva, mas não privando outras filas de tarefas e nunca processando events de qualquer origem de tarefa fora de ordem. […]

Observe que o último bit: depende da implementação do navegador determinar quais events serão agrupados e processados ​​em ordem, bem como a prioridade dada a qualquer tipo específico de evento. Portanto, há poucas razões para esperar que todos os navegadores enviem todos os events em uma ordem fixa, agora ou no futuro.

Para qualquer pessoa que queira saber quais são os events relativos à sequência, veja abaixo. Até agora eu testei apenas no Chrome.

  1. passe o rato por cima
  2. mousemove
  3. mouseout

  1. mousedown
  2. mudar (na input focada)
  3. borrão (no elemento focalizado)
  4. foco
  5. mouseup
  6. clique
  7. dblclick

  1. keydown
  2. pressione o botão
  3. chave

Se você está olhando para events de mouse / toque, Patrick H. Lauke publicou uma palestra sobre o assunto . Definitivamente, uma leitura interessante – e lida com todas as peculiaridades de diferentes navegadores, dispositivos diferentes e padrões diferentes.

Ele também inclui um conjunto abrangente de testes .