web-dev-qa-db-de.com

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

Ich möchte alle Ereignisse sehen, die von einem Eingabefeld ausgelöst werden, wenn ein Benutzer damit interagiert. Dies beinhaltet Dinge wie:

  1. Klicken Sie darauf.
  2. Anklicken.
  3. Einsteigen.
  4. Weg damit.
  5. Ctrl+C und Ctrl+V auf der Tastatur.
  6. Rechtsklick -> Einfügen.
  7. Rechtsklick -> Ausschneiden.
  8. Rechtsklick -> Kopieren.
  9. Text aus einer anderen Anwendung ziehen und ablegen.
  10. Ändern Sie es mit Javascript.
  11. Ändern Sie es mit einem Debug-Tool wie Firebug.

Ich möchte es mit console.log anzeigen. Ist dies in Javascript/jQuery möglich und wenn ja, wie mache ich das?

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

Dadurch erhalten Sie eine Menge (aber nicht alle) Informationen darüber, ob ein Ereignis ausgelöst wird ... Abgesehen von der manuellen Codierung, kann ich mir keine andere Möglichkeit vorstellen.

56
Joseph Marikle

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
178
sidonaldson

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 ...).

30
Simon
$('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);
}); 
15
maudulus

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'));
10
Patrick Roberts

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:

 console log

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

6
Codebeat

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
  }
});
4
Robert Plummer

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.

2
Shawn Khameneh

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

 enter image description here

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...

0
Akash