4

Existe alguma maneira de ficar monitorando os eventos que estão acontecendo na página?

Alguma função que deixe registrando no console.log por exemplo, não sei, é só um exemplo..

Existe uma maneira de pegar isso?

Por exemplo, se eu clicar na página eu sei que é um evento de click, mas existem outros eventos personalizados que acontecem em determinados momentos que eu não conseguiria saber por si só, por isso minha dúvida.

4 Respostas 4

7

Você pode iterar nas propriedades do objeto document e criar um event listener apenas nas propriedades que começam com "on", como onclick, onblur, onmouseover etc. que são as propriedades dos eventos.

No addEventListener você coloca o evento sem o "on", por isso o uso do método substr(), por exemplo, no evento onclick:

on    -> prop.substr(0,2)
click -> prop.substr(2)

O e.type imprime o nome do evento disparado.

for(let prop in document){
   if(prop.substr(0,2) == "on"){
      document.addEventListener(prop.substr(2), function(e){
         console.log(e.type);
      });
   }
}

Agora, como são mais de 80 eventos, recomendo você listar apenas os eventos desejados ou os mais comuns. Imagino que você não queira escutar absolutamente todos os eventos possíveis. Neste caso você pode criar um array apenas com os eventos que desejar escutar, por exemplo:

var eventos = ['click', 'blur', 'mouseover', 'mouseup', 'mousedown'];
for(let evt of eventos){
   document.addEventListener(evt, function(e){
      console.log(e.type);
   });
}

4

Não é recomendado você escutar todos os eventos por conta da performance, porém, para casos de teste você pode adicionar vários event listeners da seguinte forma:

Object.keys(window).forEach(key => {
    if (/^on/.test(key)) {
        window.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

O objeto window pode ser substituído pelo elemento que você deseja testar, por exemplo:

Object.keys($('.teste')).forEach(key => {
    if (/^on/.test(key)) {
        $('.teste').addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

E depois, caso queira filtrar por key e mouse apenas, pode realizar da seguinte forma:

Object.keys(window).forEach(key => {
    if (/^on(key|mouse)/.test(key)) {
        window.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});
0
window.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

ai onde ta 'click' vc pode colocar no nome do evento que vc quer escutar tipo 'load', 'keypress' e outros

2
  • Sim, obrigado. Mas, se eu não souber o nome do evento? Por isso a pergunta, monitorar todos os eventos da página pra poder identificá-los Commented 9/05/2019 às 11:00
  • se isso for possível vai deixar seu site muito mau otimizado pois so de vc movimentar o seu mouse do inicio ao fim da tela vc executa dezenas de eventos imagina vc tendo que colocar o javascript pra ler isso tudo. eu recomendo fazer um array dos mais utilizados Commented 9/05/2019 às 11:24
0

Para monitorar os eventos que estão acontecendo na página, deves primeiro buscar os eventos disponíveis na página e ouvir cada evento individualmente.

Exemplo:

  window.onload = () => {
  var ev = '';
  var allEvents = [];

  // Busca todos os eventos disponiveis no navegador
  for (ev in window) {
    if (/^on/.test(ev)) {
      // Adiciona cada evento disponivel
      document.addEventListener('' + ev.replace('on', ''), function(event) {
        console.log('Event: ', event.type);
      }, false);
    }
  }
}

Note que você não usa o prefixo "on" para o evento; use "click" em vez de "onclick".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .