Como você registra todos os events triggersdos por um elemento no jQuery?

Eu gostaria de ver todos os events triggersdos por um campo de input enquanto um usuário interage com ele. Isso inclui coisas como:

  1. Clicando nele.
  2. Clicando fora dele.
  3. Tabbing para ele.
  4. Tabulando longe disso.
  5. Ctrl + C e Ctrl + V no teclado.
  6. Clique com o botão direito -> Colar.
  7. Clique com o botão direito -> Cortar.
  8. Clique com o botão direito -> Copiar.
  9. Arrastando e soltando texto de outro aplicativo.
  10. Modificando-o com Javascript.
  11. Modificando-o com uma ferramenta de debugging, como o Firebug.

Eu gostaria de exibi-lo usando console.log . Isso é possível em Javascript / jQuery e, em caso afirmativo, como faço isso?

 $(element).on("click mousedown mouseup focus blur keydown change",function(e){ console.log(e); }); 

Isso vai te dar muito (mas não todas) as informações sobre se um evento é acionado … diferente de codificá-lo manualmente assim, não consigo pensar em outra maneira de fazer isso.

Eu não tenho idéia porque ninguém usa isso … (talvez porque é apenas uma coisa de webkit)

Abra o console:

 monitorEvents(document.body); // logs all events on the body monitorEvents(document.body, 'mouse'); // logs mouse events on the body monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs 

Existe uma ótima maneira genérica de usar a coleção .data (‘events’):

 function getEventsList($obj) { var ev = new Array(), events = $obj.data('events'), i; for(i in events) { ev.push(i); } return ev.join(' '); } $obj.on(getEventsList($obj), function(e) { console.log(e); }); 

Isso registra todos os events que já foram ligados ao elemento por jQuery no momento em que esse evento específico é triggersdo. Este código foi muito útil para mim muitas vezes.

Btw: Se você quiser ver todos os possíveis events sendo triggersdos em um object use firebug: apenas clique com o botão direito no elemento DOM em html e marque “Log Events”. Todos os events são registrados no console (às vezes isso é um pouco chato porque registra todos os movimentos do mouse …).

 $('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){ console.log(e); }); 

Eu sei que a resposta já foi aceita para isso, mas acho que pode haver uma maneira um pouco mais confiável em que você não precisa necessariamente saber o nome do evento de antemão. Isso só funciona para events nativos, embora, tanto quanto eu sei, não os personalizados que foram criados por plugins. Eu optei por omitir o uso do jQuery para simplificar um pouco as coisas.

 let input = document.getElementById('inputId'); Object.getOwnPropertyNames(input) .filter(key => key.slice(0, 2) === 'on') .map(key => key.slice(2)) .forEach(eventName => { input.addEventListener(eventName, event => { console.log(event.type); console.log(event); }); }); 

Espero que isso ajude quem lê isso.

EDITAR

Então eu vi outra pergunta aqui que era similar, então outra sugestão seria fazer o seguinte:

 monitorEvents(document.getElementById('inputId')); 

https://github.com/robertleeplummerjr/wiretap.js

 new Wiretap({ add: function() { //fire when an event is bound to element }, before: function() { //fire just before an event executes, arguments are automatic }, after: function() { //fire just after an event executes, arguments are automatic } }); 

Tópico antigo, eu sei. Eu também precisava de algo para monitorar events e escrevi esta solução muito útil (excelente). Você pode monitorar todos os events com este gancho (na programação do Windows isso é chamado de gancho). Este gancho não afeta a operação do seu software / programa.

No log do console, você pode ver algo assim:

log do console

Explicação do que você vê:

No log do console, você verá todos os events selecionados (veja abaixo “como usar” ) e mostra o tipo de object, nome (s) da class, id, <: nome da função>, <: nome do evento>. A formatação dos objects é semelhante ao CSS.

Quando você clica em um botão ou qualquer evento vinculado, você o verá no log do console.

O código que eu escrevi:

 function setJQueryEventHandlersDebugHooks(bMonTrigger, bMonOn, bMonOff) { jQuery.fn.___getHookName___ = function() { // First, get object name var sName = new String( this[0].constructor ), i = sName.indexOf(' '); sName = sName.substr( i, sName.indexOf('(')-i ); // Classname can be more than one, add class points to all if( typeof this[0].className === 'string' ) { var sClasses = this[0].className.split(' '); sClasses[0]='.'+sClasses[0]; sClasses = sClasses.join('.'); sName+=sClasses; } // Get id if there is one sName+=(this[0].id)?('#'+this[0].id):''; return sName; }; var bTrigger = (typeof bMonTrigger !== "undefined")?bMonTrigger:true, bOn = (typeof bMonOn !== "undefined")?bMonOn:true, bOff = (typeof bMonOff !== "undefined")?bMonOff:true, fTriggerInherited = jQuery.fn.trigger, fOnInherited = jQuery.fn.on, fOffInherited = jQuery.fn.off; if( bTrigger ) { jQuery.fn.trigger = function() { console.log( this.___getHookName___()+':trigger('+arguments[0]+')' ); return fTriggerInherited.apply(this,arguments); }; } if( bOn ) { jQuery.fn.on = function() { if( !this[0].__hooked__ ) { this[0].__hooked__ = true; // avoids infinite loop! console.log( this.___getHookName___()+':on('+arguments[0]+') - binded' ); $(this).on( arguments[0], function(e) { console.log( $(this).___getHookName___()+':'+e.type ); }); } var uResult = fOnInherited.apply(this,arguments); this[0].__hooked__ = false; // reset for another event return uResult; }; } if( bOff ) { jQuery.fn.off = function() { if( !this[0].__unhooked__ ) { this[0].__unhooked__ = true; // avoids infinite loop! console.log( this.___getHookName___()+':off('+arguments[0]+') - unbinded' ); $(this).off( arguments[0] ); } var uResult = fOffInherited.apply(this,arguments); this[0].__unhooked__ = false; // reset for another event return uResult; }; } } 

Exemplos de como usá-lo:

Monitore todos os events:

 setJQueryEventHandlersDebugHooks(); 

Monitore todos os gatilhos somente:

 setJQueryEventHandlersDebugHooks(true,false,false); 

Monitore todos os events ON apenas:

 setJQueryEventHandlersDebugHooks(false,true,false); 

Monitore todos os desvinculados somente OFF:

 setJQueryEventHandlersDebugHooks(false,false,true); 

Observações / Aviso:

  • Use isso apenas para debugging, desligue-o quando usar na versão final do produto
  • Se você quiser ver todos os events, você deve chamar essa function diretamente após o jQuery ser carregado
  • Se você quiser ver apenas menos events, você pode chamar a function no tempo que você precisar
  • Se você quiser executá-lo automaticamente, coloque () (); em torno da function

Espero que ajude! 😉

Basta adicionar isso à página e não há outras preocupações.

 $('input').live('click mousedown mouseup focus keydown change blur', function(e) { console.log(e); }); 

Você também pode usar o console.log (‘Input event:’ + e.type) para facilitar.

PASSO 1: Verifique os events de um HTML element no developer console do developer console :

insira a descrição da imagem aqui

PASSO 2: Ouça os events que queremos capturar:

 $(document).on('ch-ui-container-closed ch-ui-container-opened', function(evt){ console.log(evt); }); 

Boa sorte…

 $(document).on("click mousedown mouseup focus blur keydown change",function(e){ console.log(e); });