Wie protokollieren Sie alle Ereignisse, die von einem Element in jQuery ausgelöst wurden?

Ich habe keine Ahnung, warum niemand das benutzt ... (vielleicht, weil es nur eine Webkitsache ist)

Konsole öffnen:

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

Es gibt eine generische Methode von Nizza, die die .data-Sammlung ("events") verwendet:

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

Dies protokolliert jedes Ereignis, das bereits von jQuery an das Element gebunden wurde, sobald dieses bestimmte Ereignis ausgelöst wird. Dieser Code war mir schon oft sehr hilfreich.

Übrigens: Wenn Sie sehen möchten, dass jedes mögliche Ereignis für ein Objekt ausgelöst wird, verwenden Sie firebug: Klicken Sie mit der rechten Maustaste auf das DOM-Element in der Registerkarte "HTML" und aktivieren Sie "Ereignisse protokollieren". Jedes Ereignis wird dann auf der Konsole protokolliert (dies ist manchmal etwas ärgerlich, da jede Mausbewegung protokolliert wird ...).

$('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);
}); 

Ich weiß, dass die Antwort bereits akzeptiert wurde, aber ich denke, es gibt einen etwas zuverlässigeren Weg, auf dem Sie nicht unbedingt den Namen der Veranstaltung vorher kennen müssen. Dies funktioniert nur für native Ereignisse, allerdings nicht für benutzerdefinierte Ereignisse, die von Plugins erstellt wurden. Ich habe mich entschieden, die Verwendung von jQuery wegzulassen, um die Dinge ein wenig zu vereinfachen.

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

Ich hoffe, das hilft jedem, der das liest.

EDIT

Also sah ich ein anderes Frage hier , das ähnlich war, also wäre ein anderer Vorschlag, folgendes zu tun:

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

Alter Thread, ich weiß. Ich brauchte auch etwas zur Überwachung der Ereignisse und schrieb diese sehr praktische (ausgezeichnete) Lösung. Mit diesem Hook können Sie alle Ereignisse überwachen (in der Windows-Programmierung wird dies als Hook bezeichnet). Dieser Haken hat keine Auswirkungen auf den Betrieb Ihrer Software/Ihres Programms.

Im console-Protokoll können Sie etwa Folgendes sehen:

Erklärung was du siehst:

Im Konsolenprotokoll sehen Sie alle von Ihnen ausgewählten Ereignisse (siehe unten "Verwendung") und zeigt den Objekttyp, Klassenname (n), ID, <: Funktionsname>, <: Ereignisname > . Die Formatierung der Objekte ist css-artig.

Wenn Sie auf eine Schaltfläche oder ein anderes gebundenes Ereignis klicken, wird es im Konsolenprotokoll angezeigt. 

Der Code, den ich geschrieben habe:

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

Beispiele zur Verwendung:

Alle Ereignisse überwachen:

setJQueryEventHandlersDebugHooks();

Nur alle Trigger überwachen:

setJQueryEventHandlersDebugHooks(true,false,false);

Nur alle ON-Ereignisse überwachen:

setJQueryEventHandlersDebugHooks(false,true,false);

Nur alle AUS-Bindungen überwachen:

setJQueryEventHandlersDebugHooks(false,false,true);

Bemerkungen/Hinweis:

• Verwenden Sie dies nur zum Debuggen. Deaktivieren Sie es, wenn Sie es in der finalen Version von Verwenden 
• Wenn Sie alle Ereignisse anzeigen möchten, müssen Sie diese Funktion Direkt nach dem Laden von jQuery aufrufen 
• Wenn Sie nur weniger Ereignisse anzeigen möchten, können Sie die Funktion zu dem Zeitpunkt aufrufen, zu dem Sie sie benötigen 
• Wenn Sie es automatisch ausführen möchten, stellen Sie place () (); um die Funktion

Ich hoffe es hilft! ;-)

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

Fügen Sie dies einfach der Seite hinzu und keine anderen Sorgen, die Ruhe wird für Sie erledigt:

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

Sie können auch console.log ('Eingabeereignis:' + e.type) verwenden, um dies zu erleichtern.

SCHRITT 1: Überprüfen Sie die events auf HTML element im developer console:

SCHRITT 2: Hören Sie sich die events an, die wir erfassen möchten:

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

Viel Glück...