Jak rejestrować wszystkie zdarzenia wywołane przez element w jQuery?

Nie mam pojęcia, dlaczego nikt tego nie używa... (może dlatego, że to tylko WebKit)

Otwórz konsolę:

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

Istnieje ładny ogólny sposób korzystania z.zbiór danych ("zdarzenia"):

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

To rejestruje każde zdarzenie, które zostało już powiązane z elementem przez jQuery w momencie, gdy to konkretne zdarzenie zostanie wywołane. Ten kod był dla mnie bardzo pomocny wiele razy.

Btw: jeśli chcesz zobaczyć wszystkie możliwe zdarzenia wywołane NA obiekcie użyj firebug: wystarczy kliknąć prawym przyciskiem myszy na elemencie DOM w zakładce html i zaznaczyć "Log Events". Każde zdarzenie jest następnie logowane do konsoli (czasami jest to trochę irytujące, ponieważ rejestruje każdy ruch myszy...).

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

Wiem, że odpowiedź została już zaakceptowana, ale myślę, że może być nieco bardziej wiarygodny sposób, w którym niekoniecznie musisz znać nazwę wydarzenia wcześniej. To działa tylko dla natywnych zdarzeń, choć o ile wiem, nie niestandardowe te, które zostały utworzone przez wtyczki. Zdecydowałem się pominąć użycie jQuery, aby nieco uprościć rzeczy.

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

EDIT

Więc zobaczyłem kolejne pytanie tutaj to było podobne, więc inną sugestią byłoby wykonanie następujących czynności:

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

Stary wątek, wiem. Potrzebowałem też czegoś do monitorowania zdarzeń i napisałem to bardzo poręczne (doskonałe) rozwiązanie. Za pomocą tego Hooka można monitorować wszystkie zdarzenia (w programowaniu windows nazywa się to Hookiem). Ten hook nie wpływa na działanie Twojego oprogramowania / programu.

W logu konsoli możesz zobaczyć coś takiego:

Wyjaśnienie tego, co widzisz:

W dzienniku konsoli zobaczysz wszystkie wybrane zdarzenia (zobacz poniżej " Jak używać " ) i pokazuje typ obiektu, nazwę(y) klasy, id,<:>,<:>. Formatowanie obiektów jest podobne do css.

Po kliknięciu przycisku lub innego wydarzenia, zobaczysz go w dzienniku konsoli.

Kod, który napisałem:

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

Przykłady użycia:

monitoruj wszystkie zdarzenia:

setJQueryEventHandlersDebugHooks();

Monitoruj tylko wszystkie wyzwalacze:

setJQueryEventHandlersDebugHooks(true,false,false);

monitoruj wszystkie zdarzenia tylko:

setJQueryEventHandlersDebugHooks(false,true,false);

Monitor all OFF unbinds only:

setJQueryEventHandlersDebugHooks(false,false,true);

Uwagi/Uwagi:

• Użyj tego tylko do debugowania, wyłącz go, gdy używasz w produkcie końcowym wersja
• jeśli chcesz zobaczyć wszystkie zdarzenia, musisz wywołać tę funkcję bezpośrednio po załadowaniu jQuery
• jeśli chcesz zobaczyć tylko mniej zdarzeń, możesz wywołać funkcję w czasie, którego potrzebujesz
• jeśli chcesz go wykonać automatycznie, place () (); around function

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

Po prostu dodaj to do strony i żadnych innych zmartwień, poradzi sobie z resztą za ciebie:

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

Możesz także użyć konsoli.log ('input event:' + E.type) aby to ułatwić.

Krok 1: Sprawdź events dla HTML element na developer console:

Krok 2: Posłuchaj {[1] } chcemy uchwycić:

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

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