Como você registra todos os eventos disparados por um elemento no jQuery?

Eu gostaria de ver todos os eventos disparados por um campo de entrada conforme um usuário interage com ele. Isso inclui coisas como:

1. Clicando nele.
2. Clicando fora dele.
3. Tabulando para ele.
4. Tabbing longe dele.
5. Ctrl+ Ce 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. Arrastar e soltar texto de outro aplicativo.
10. Modificando com Javascript.
11. Modificando-o com uma ferramenta de depuração, como 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 lhe dará muitas (mas não todas) as informações sobre se um evento é disparado ... além de codificá-lo manualmente assim, não consigo pensar em nenhuma outra maneira de fazer isso.

Não tenho ideia de por que ninguém usa isso ... (talvez porque seja 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 boa maneira genérica de usar a coleção .data ('eventos'):

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 eventos que já foram vinculados ao elemento por jQuery no momento em que esse evento específico é acionado. Este código foi muito útil para mim muitas vezes.

A propósito: se você quiser ver todos os eventos possíveis sendo disparados em um objeto, use firebug: apenas clique com o botão direito do mouse no elemento DOM na guia html e marque "Log Events". Cada evento é então registrado no console (isso às vezes é um pouco chato porque registra cada movimento 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, onde você não precisa necessariamente saber o nome do evento de antemão. Isso só funciona para eventos nativos, embora eu saiba, não para eventos personalizados que foram criados por plug-ins. Optei por omitir o uso de 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 ler isso.

EDITAR

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

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

Tópico antigo, eu sei. Eu precisava também de algo para monitorar eventos e escrevi esta solução muito útil (excelente). Você pode monitorar todos os eventos 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:

Explicação do que você vê:

No log do console você verá todos os eventos que selecionar (veja abaixo "como usar" ) e mostra o tipo de objeto, nome (s) de classe, id, <: nome da função>, <: nome do evento>. A formatação dos objetos é semelhante a css.

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

O código que 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 usar:

Monitore todos os eventos:

setJQueryEventHandlersDebugHooks();

Monitore apenas todos os gatilhos:

setJQueryEventHandlersDebugHooks(true,false,false);

Monitore todos os eventos ON apenas:

setJQueryEventHandlersDebugHooks(false,true,false);

Monitore todos os desligamentos OFF apenas:

setJQueryEventHandlersDebugHooks(false,false,true);

Observações / Aviso:

• Use isso apenas para depuração, desligue-o ao usar na versão final do produto
• Se você quiser ver todos os eventos, você deve chamar esta função diretamente após o jQuery ser carregado
• Se você quiser ver apenas menos eventos, pode chamar a função na hora que precisar
• Se você quiser executá-lo automaticamente, coloque () (); em torno da função

Espero que ajude! ;-)

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
  }
});

Basta adicionar isso à página e sem outras preocupações, cuidarei do resto para você:

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

Você também pode usar console.log ('Evento de entrada:' + e.type) para torná-lo mais fácil.

PASSO 1: Verifique se eventshá um HTML elementno developer console:

ETAPA 2: Ouça o eventsque queremos capturar:

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

Boa sorte...

Recentemente encontrei e modifiquei este trecho de um post existente do SO que não consegui encontrar novamente, mas achei muito útil

// specify any elements you've attached listeners to here
const nodes = [document]

// https://developer.mozilla.org/en-US/docs/Web/Events
const logBrowserEvents = () => {
  const AllEvents = {
    AnimationEvent: ['animationend', 'animationiteration', 'animationstart'],
    AudioProcessingEvent: ['audioprocess'],
    BeforeUnloadEvent: ['beforeunload'],
    CompositionEvent: [
      'compositionend',
      'compositionstart',
      'compositionupdate',
    ],
    ClipboardEvent: ['copy', 'cut', 'paste'],
    DeviceLightEvent: ['devicelight'],
    DeviceMotionEvent: ['devicemotion'],
    DeviceOrientationEvent: ['deviceorientation'],
    DeviceProximityEvent: ['deviceproximity'],
    DragEvent: [
      'drag',
      'dragend',
      'dragenter',
      'dragleave',
      'dragover',
      'dragstart',
      'drop',
    ],
    Event: [
      'DOMContentLoaded',
      'abort',
      'afterprint',
      'beforeprint',
      'cached',
      'canplay',
      'canplaythrough',
      'change',
      'chargingchange',
      'chargingtimechange',
      'checking',
      'close',
      'dischargingtimechange',
      'downloading',
      'durationchange',
      'emptied',
      'ended',
      'error',
      'fullscreenchange',
      'fullscreenerror',
      'input',
      'invalid',
      'languagechange',
      'levelchange',
      'loadeddata',
      'loadedmetadata',
      'noupdate',
      'obsolete',
      'offline',
      'online',
      'open',
      'open',
      'orientationchange',
      'pause',
      'play',
      'playing',
      'pointerlockchange',
      'pointerlockerror',
      'ratechange',
      'readystatechange',
      'reset',
      'seeked',
      'seeking',
      'stalled',
      'submit',
      'success',
      'suspend',
      'timeupdate',
      'updateready',
      'visibilitychange',
      'volumechange',
      'waiting',
    ],
    FocusEvent: [
      'DOMFocusIn',
      'DOMFocusOut',
      'Unimplemented',
      'blur',
      'focus',
      'focusin',
      'focusout',
    ],
    GamepadEvent: ['gamepadconnected', 'gamepaddisconnected'],
    HashChangeEvent: ['hashchange'],
    KeyboardEvent: ['keydown', 'keypress', 'keyup'],
    MessageEvent: ['message'],
    MouseEvent: [
      'click',
      'contextmenu',
      'dblclick',
      'mousedown',
      'mouseenter',
      'mouseleave',
      'mousemove',
      'mouseout',
      'mouseover',
      'mouseup',
      'show',
    ],
    // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
    MutationNameEvent: ['DOMAttributeNameChanged', 'DOMElementNameChanged'],
    MutationEvent: [
      'DOMAttrModified',
      'DOMCharacterDataModified',
      'DOMNodeInserted',
      'DOMNodeInsertedIntoDocument',
      'DOMNodeRemoved',
      'DOMNodeRemovedFromDocument',
      'DOMSubtreeModified',
    ],
    OfflineAudioCompletionEvent: ['complete'],
    OtherEvent: ['blocked', 'complete', 'upgradeneeded', 'versionchange'],
    UIEvent: [
      'DOMActivate',
      'abort',
      'error',
      'load',
      'resize',
      'scroll',
      'select',
      'unload',
    ],
    PageTransitionEvent: ['pagehide', 'pageshow'],
    PopStateEvent: ['popstate'],
    ProgressEvent: [
      'abort',
      'error',
      'load',
      'loadend',
      'loadstart',
      'progress',
    ],
    SensorEvent: ['compassneedscalibration', 'Unimplemented', 'userproximity'],
    StorageEvent: ['storage'],
    SVGEvent: [
      'SVGAbort',
      'SVGError',
      'SVGLoad',
      'SVGResize',
      'SVGScroll',
      'SVGUnload',
    ],
    SVGZoomEvent: ['SVGZoom'],
    TimeEvent: ['beginEvent', 'endEvent', 'repeatEvent'],
    TouchEvent: [
      'touchcancel',
      'touchend',
      'touchenter',
      'touchleave',
      'touchmove',
      'touchstart',
    ],
    TransitionEvent: ['transitionend'],
    WheelEvent: ['wheel'],
  }

  const RecentlyLoggedDOMEventTypes = {}

  Object.keys(AllEvents).forEach((DOMEvent) => {
    const DOMEventTypes = AllEvents[DOMEvent]

    if (Object.prototype.hasOwnProperty.call(AllEvents, DOMEvent)) {
      DOMEventTypes.forEach((DOMEventType) => {
        const DOMEventCategory = `${DOMEvent} ${DOMEventType}`

        nodes.forEach((node) => {
          node.addEventListener(
            DOMEventType,
            (e) => {
              if (RecentlyLoggedDOMEventTypes[DOMEventCategory]) return

              RecentlyLoggedDOMEventTypes[DOMEventCategory] = true

              // NOTE: throttle continuous events
              setTimeout(() => {
                RecentlyLoggedDOMEventTypes[DOMEventCategory] = false
              }, 1000)

              const isActive = e.target === document.activeElement

              // https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
              const hasActiveElement = document.activeElement !== document.body

              const msg = [
                DOMEventCategory,
                'target:',
                e.target,
                ...(hasActiveElement
                  ? ['active:', document.activeElement]
                  : []),
              ]

              if (isActive) {
                console.info(...msg)
              }
            },
            true,
          )
        })
      })
    }
  })
}
logBrowserEvents()
// export default logBrowserEvents

function bindAllEvents (el) {
  for (const key in el) {
      if (key.slice(0, 2) === 'on') {
          el.addEventListener(key.slice(2), e => console.log(e.type));
      }
  }
}
bindAllEvents($('.yourElement'))

Isso usa um pouco de ES6 para beleza, mas pode ser facilmente traduzido para navegadores legados também. Na função anexada aos ouvintes de evento, atualmente está apenas registrando o tipo de evento ocorrido, mas é aqui que você pode imprimir informações adicionais ou, usando um caso de switch no e.type, você só pode imprimir informações sobre eventos específicos

Esta é uma maneira não jquery de monitorar eventos no console com o seu código e sem o uso de monitorEvents () porque isso só funciona no Chrome Developer Console. Você também pode optar por não monitorar certos eventos editando o array no_watch.

    function getEvents(obj) {
    window["events_list"] = [];
    var no_watch = ['mouse', 'pointer']; // Array of event types not to watch
    var no_watch_reg = new RegExp(no_watch.join("|"));

    for (var prop in obj) {
        if (prop.indexOf("on") === 0) {
            prop = prop.substring(2); // remove "on" from beginning
            if (!prop.match(no_watch_reg)) {
                window["events_list"].push(prop);
                window.addEventListener(prop, function() {
                    console.log(this.event); // Display fired event in console
                } , false);
            }
        }
    }
    window["events_list"].sort(); // Alphabetical order 

}

getEvents(document); // Put window, document or any html element here
console.log(events_list); // List every event on element