¿Cómo registra todos los eventos disparados por un elemento en jQuery?

Me gustaría ver todos los eventos activados por un campo de entrada cuando un usuario interactúa con él. Esto incluye cosas como:

1. Haciendo clic en él.
2. Haciendo clic fuera de él.
3. Tabulación en él.
4. Tabulando lejos de él.
5. Ctrl+ Cy Ctrl+V en el teclado.
6. Haga clic derecho -> Pegar.
7. Haga clic derecho -> Cortar.
8. Haga clic derecho -> Copiar.
9. Arrastrar y soltar texto desde otra aplicación.
10. Modificándolo con Javascript.
11. Modificándolo con una herramienta de depuración, como Firebug.

Me gustaría mostrarlo usando console.log. ¿Es esto posible en Javascript / jQuery? Si es así, ¿cómo lo hago?

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

Eso le dará mucha (pero no toda) la información sobre si se activa un evento ... aparte de codificarlo manualmente de esta manera, no puedo pensar en ninguna otra forma de hacerlo.

No tengo idea de por qué nadie usa esto ... (tal vez porque es solo una cosa de webkit)

Consola abierta:

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

Hay una buena forma genérica de usar la colección .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);
});

Esto registra cada evento que ya ha sido vinculado al elemento por jQuery en el momento en que se activa este evento específico. Este código fue muy útil para mí muchas veces.

Por cierto: si desea ver todos los eventos posibles que se disparan en un objeto, use firebug: simplemente haga clic derecho en el elemento DOM en la pestaña html y marque "Registrar eventos". Luego, cada evento se registra en la consola (esto a veces es un poco molesto porque registra cada movimiento del 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);
}); 

Sé que la respuesta ya ha sido aceptada, pero creo que podría haber una forma un poco más confiable en la que no necesariamente tenga que saber el nombre del evento de antemano. Esto solo funciona para eventos nativos, aunque hasta donde yo sé, no personalizados que han sido creados por complementos. Opté por omitir el uso de jQuery para simplificar un poco las cosas.

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 esto ayude a cualquiera que lea esto.

EDITAR

Entonces vi otra pregunta aquí que era similar, por lo que otra sugerencia sería hacer lo siguiente:

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

Viejo hilo, lo sé. También necesitaba algo para monitorear eventos y escribí esta muy útil (excelente) solución. Puede monitorear todos los eventos con este gancho (en la programación de Windows esto se llama gancho). Este gancho no afecta el funcionamiento de su software / programa.

En el registro de la consola puede ver algo como esto:

Explicación de lo que ves:

En el registro de la consola, verá todos los eventos que seleccione (vea más abajo "cómo usar" ) y muestra el tipo de objeto, los nombres de clase, id, <: nombre de la función>, <: nombre del evento>. El formato de los objetos es similar a CSS.

Cuando haga clic en un botón o en cualquier evento vinculado, lo verá en el registro de la consola.

El código que escribí:

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

Ejemplos de cómo usarlo:

Monitorear todos los eventos:

setJQueryEventHandlersDebugHooks();

Supervisar solo todos los desencadenantes

setJQueryEventHandlersDebugHooks(true,false,false);

Supervisar solo todos los eventos ON:

setJQueryEventHandlersDebugHooks(false,true,false);

Supervisar todos los desvinculaciones OFF solamente:

setJQueryEventHandlersDebugHooks(false,false,true);

Observaciones / Aviso:

• Use esto solo para depurar, apáguelo cuando lo use en la versión final del producto
• Si desea ver todos los eventos, debe llamar a esta función directamente después de que se cargue jQuery
• Si desea ver solo menos eventos, puede llamar a la función en el momento que lo necesite
• Si desea ejecutarlo automáticamente, coloque () (); alrededor de la función

¡Espero eso ayude! ;-)

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

Simplemente agregue esto a la página y no se preocupe, se encargará del descanso por usted:

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

También puede usar console.log ('Evento de entrada:' + e.type) para hacerlo más fácil.

PASO 1: Compruebe el eventsde una HTML elementen la developer console:

PASO 2: Escuche lo eventsque queremos capturar:

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

Buena suerte...

Recientemente encontré y modifiqué este fragmento de una publicación SO existente que no he podido encontrar nuevamente, pero lo encontré muy ú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'))

Esto usa un poco de ES6 para la belleza, pero también se puede traducir fácilmente para navegadores heredados. En la función adjunta a los oyentes de eventos, actualmente solo se está desconectando qué tipo de evento ocurrió, pero aquí es donde puede imprimir información adicional, o usando un interruptor en el e.type, solo puede imprimir información sobre eventos específicos

Aquí hay una forma no jquery de monitorear eventos en la consola con su código y sin el uso de monitorEvents () porque eso solo funciona en Chrome Developer Console. También puede optar por no monitorear ciertos eventos editando la matriz 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