Visualização de eventos acionados em elementos com o Chrome DevTools

Para solucionar problemas e otimizar o tratamento de eventos em suas páginas da web, você pode usar o Chrome DevTools para inspecionar os eventos acionados em elementos específicos.

Execute as etapas a seguir usando o Chrome Web Desenvolvedor:

1. Inspecionar o elemento:

   • Clique com o botão direito no elemento de destino e selecione "Inspecionar" ou navegue até " Guia Elementos" no DevTools.

2. Monitor Eventos:

   • Usando monitorEvents:

     • Abra a guia "Console".
     • Insira monitorEvents ($0) no console, onde $0 representa o selecionado elemento.

   • Especificando o tipo de evento:

     • Opcionalmente, forneça o tipo de evento que você deseja monitorar como um segundo argumento para monitorarEvents, por exemplo, monitorEvents(document.body, 'mouse').

As interações com o elemento inspecionado agora exibirão seus nomes de eventos e dados associados.

3. Parar monitoramento:

   • Para interromper o monitoramento de eventos, insira unmonitorEvents($0) no campo console.

Tipos de eventos disponíveis (a partir de 30/01/2023)

Você pode restringir os eventos monitorados especificando o seguintes tipos:

• mouse: eventos do mouse (para baixo, para cima, clique, etc.)
• tecla: eventos de teclado (para baixo, para cima, pressionar, etc.)
• toque: eventos de toque (iniciar, mover, fim, etc.)
• controle: eventos de controle de elemento (redimensionar, focar, alterar, etc.)