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

Question

J'aimerais voir tous les événements déclenchés par un champ de saisie en tant qu'utilisateur interagit avec elle. Cela inclut des choses comme:

1. En cliquant sur elle.
2. En cliquant sur off.
3. La tabulation.
4. La tabulation loin de lui.
5. Ctrl+C et Ctrl+V sur le clavier.
6. Faites un clic droit -> Coller.
7. Faites un clic droit -> Couper.
8. Faites un clic droit -> Copier.
9. Glisser-déposer du texte à partir d'une autre application.
10. En le modifiant avec le Javascript.
11. En le modifiant avec un outil de débogage, comme Firebug.

J'aimerais afficher à l'aide d' console.log. Est-ce possible en Javascript/jQuery, et si oui, comment dois-je faire?

Answer 1

Je n'ai aucune idée pourquoi personne ne l'utilise... (peut-être parce que c'est seulement une webkit chose)

Ouvrez la console:

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

Answer 2

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

Que vous obtiendrez un beaucoup (mais pas tous) des informations sur si un événement est déclenché... autres que manuellement codage comme cela, je ne peux pas penser à un autre moyen de le faire.

Answer 3

Il y a une belle façon générique à l'aide de l' .de données ("événements") de collecte:

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

Il enregistre tous les événements qui ont déjà été lié à l'élément par un plugin, ou de sorte que le moment où cet événement est déclenché. Ce code a été sacrément utile pour moi à de nombreuses reprises.

Btw: Si vous voulez voir tous les événements possibles de feu sur un objet l'utilisation de firebug: juste à droite, cliquez sur l'élément du DOM dans l'onglet html, cochez la case "Journal des Événements". Chaque événement devient alors connecté à la console (c'est parfois un peu ennuyeux car il enregistre tout mouvement de la souris...).

Answer 4

Je sais que la réponse a déjà été accepté, mais je pense qu'il y a peut-être un peu plus fiable où vous n'avez pas nécessairement besoin de connaître le nom de l'événement à l'avance. Cela ne fonctionne que pour des événements autant que je sais, pas la coutume de ceux qui ont été créés par les plugins. J'ai opté pour omettre l'utilisation de jQuery pour simplifier un peu les choses.

var input = document.getElementById('inputId');
Object.getOwnPropertyNames(input).filter(function(key){
  return key.slice(0,2)=='on';
}).map(function(key){
  return key.slice(2);
}).forEach(function(eventName){
  input.addEventListener(eventName, function(event){
    console.log(event.type);
    console.log(event);
  });
});

J'espère que cela aide quelqu'un qui lit ceci.

MODIFIER

Donc j'ai vu une autre question qui a été semblable, donc une autre suggestion serait de faire ce qui suit:

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

Answer 5

Juste ajouter ceci à la page et pas d'autres soucis, s'occupera de tout repos pour vous:

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

Vous pouvez également utiliser la console.log ("l'Entrée de l'événement:' + e.type) pour le rendre plus facile.