Simulando o mouseover em JavaScript: esclarecendo discrepâncias e implementando o controle manual

Ao tentar simular eventos de mouseover no Chrome, você pode ter encontrado um problema intrigante emitir. Apesar do ouvinte de evento "mouseover" ter sido ativado com sucesso, a declaração CSS "hover" correspondente não entra em vigor. Além disso, as tentativas de modificar a lista de classes do elemento usando classList.add("hover") dentro do ouvinte mouseover também não conseguem acionar as alterações CSS desejadas.

A chave está em entender a distinção entre eventos confiáveis ​​e não confiáveis. De acordo com o protocolo de segurança do navegador, determinados eventos originados da interação do usuário ou de modificações no DOM são considerados confiáveis, enquanto aqueles iniciados pelo JavaScript são classificados como não confiáveis. Os eventos de foco se enquadram na última categoria.

Devido à sua natureza não confiável, os eventos de foco não podem acionar diretamente ações CSS predeterminadas. Esta é uma medida de proteção destinada a evitar que scripts maliciosos modifiquem aspectos críticos do comportamento da página.

Portanto, para obter o efeito de foco desejado com JavaScript, é necessária uma abordagem alternativa. Em vez de depender do evento de foco nativo, você pode adicionar e remover manualmente uma classe personalizada (por exemplo, "hover") quando ocorrem os eventos de mouseover e mouseout. Isso permitirá que você mesmo controle as alterações CSS associadas ao estado "hover".