web-dev-qa-db-fra.com

Comment enregistrez-vous tous les événements déclenchés par un élément dans jQuery?

J'aimerais que tous les événements soient déclenchés par un champ de saisie lorsqu'un utilisateur interagit avec lui. Cela inclut des choses comme:

  1. En cliquant dessus.
  2. En cliquant dessus.
  3. Taper dedans.
  4. Tabing loin d'elle.
  5. Ctrl+C et Ctrl+V sur le clavier.
  6. Clic droit -> Coller.
  7. Clic droit -> Couper.
  8. Clic droit -> Copier.
  9. Glisser-déposer du texte depuis une autre application.
  10. Le modifier avec Javascript.
  11. Le modifier avec un outil de débogage, comme Firebug.

J'aimerais l'afficher en utilisant console.log. Est-ce possible en Javascript/jQuery, et si oui, comment puis-je le faire?

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

Cela vous donnera beaucoup d'informations (mais pas toutes) sur le déclenchement d'un événement ... mis à part le coder manuellement de la sorte, je ne vois pas d'autre moyen de le faire.

56
Joseph Marikle

Je ne sais pas pourquoi personne ne l'utilise ... (peut-être parce que c'est un truc Webkit)

Console ouverte:

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

Il existe un moyen générique de Nice utilisant la collection .data ('events'):

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

Cela enregistre chaque événement qui a déjà été lié à l'élément par jQuery au moment où cet événement spécifique est déclenché. Ce code m'a été très utile à de nombreuses reprises.

Btw: Si vous voulez voir tous les événements possibles déclenchés sur un objet, utilisez firebug: faites un clic droit sur l’élément DOM de l’onglet html et cochez la case "Enregistrer les événements". Chaque événement est ensuite enregistré sur la console (c'est parfois un peu gênant car il enregistre chaque mouvement de souris ...).

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

Je sais que la réponse a déjà été acceptée, mais je pense qu’il existe peut-être un moyen un peu plus fiable de ne pas nécessairement connaître le nom de l’événement à l’avance. Cela ne fonctionne que pour les événements natifs, pour autant que je sache, pas ceux personnalisés qui ont été créés par des plugins. J'ai choisi de ne pas utiliser jQuery pour simplifier un peu les choses.

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

J'espère que cela aide tous ceux qui lisent ceci.

MODIFIER

J'ai donc vu une autre question ici qui était similaire, donc une autre suggestion serait de procéder comme suit:

monitorEvents(document.getElementById('inputId'));
10
Patrick Roberts

Vieux fil, je sais. J'avais aussi besoin de quelque chose pour surveiller les événements et j'ai écrit cette solution très pratique (excellente). Vous pouvez surveiller tous les événements avec ce hook (dans la programmation Windows, cela s'appelle un hook). Ce raccordement n'affecte pas le fonctionnement de votre logiciel/programme.

Dans le journal console, vous pouvez voir quelque chose comme ceci:

 console log

Explication de ce que vous voyez:

Le journal de la console affiche tous les événements que vous sélectionnez (voir ci-dessous "comment utiliser") et indique le type d'objet, le nom de la classe, l'identifiant, <: nom de la fonction>, <: nom de l'événement > . La mise en forme des objets est de type css.

Lorsque vous cliquez sur un bouton ou sur un événement lié, vous le verrez dans le journal de la console. 

Le code que j'ai écrit:

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

Exemples d'utilisation:

Surveiller tous les événements: _

setJQueryEventHandlersDebugHooks();

Surveille tous les déclencheurs uniquement:

setJQueryEventHandlersDebugHooks(true,false,false);

Surveille tous les événements ON: :

setJQueryEventHandlersDebugHooks(false,true,false);

Surveiller tous les OFF non liés uniquement:

setJQueryEventHandlersDebugHooks(false,false,true);

Remarques/Avis:

  • Utilisez-le uniquement pour le débogage, désactivez-le lorsque vous utilisez la version finale du produit
  • Si vous voulez voir tous les événements, vous devez appeler cette fonction Directement après le chargement de jQuery 
  • Si vous voulez voir moins d'événements, vous pouvez appeler la fonction à l'heure souhaitée. 
  • Si vous voulez l'exécuter automatiquement, placez () (); autour de la fonction

J'espère que ça aide! ;-)

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

Il suffit d’ajouter ceci à la page et aucun autre souci ne gèrera le repos pour vous:

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

Vous pouvez également utiliser console.log ('Input event:' + e.type) pour le simplifier.

2
Shawn Khameneh

ÉTAPE 1: Recherchez dans la events un HTML element sur le developer console:

 enter image description here

ÉTAPE 2: Écoutez la events que nous voulons capturer:

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

Bonne chance...

0
Akash