55 votes

Est-il possible de capturer par programme tous les événements de la page dans le navigateur?

Tout d'abord, voici une liste des types d'événements qui sont définies par les normes W3C. (Cette liste est basée sur les onevent attributs définis dans la norme HTML5. Je suppose qu'il y a des dizaines d'autres types d'événements, mais cette liste est assez long, car il s'agit).

  • abandonner
  • afterprint
  • beforeprint
  • beforeunload
  • flou
  • canplay
  • canplaythrough
  • changement
  • cliquez sur
  • contextmenu
  • copie
  • cuechange
  • couper
  • dblclick
  • DOMContentLoaded
  • faites glisser
  • dragend
  • dragenter
  • dragleave
  • dragover
  • dragstart
  • drop
  • durationchange
  • vidé
  • terminé
  • erreur
  • focus
  • focusin
  • focusout
  • formchange
  • forminput
  • hashchange
  • entrée
  • non valide
  • keydown
  • keypress
  • keyup
  • charge
  • loadeddata se
  • loadedmetadata
  • loadstart
  • message
  • mousedown
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • passage de la souris
  • mouseup
  • la roulette de la souris
  • en mode hors connexion
  • en ligne
  • pagehide
  • pageshow
  • coller
  • pause
  • jouer
  • jouer
  • popstate
  • progrès
  • ratechange
  • readystatechange
  • refaire
  • réinitialiser
  • redimensionner
  • faites défiler jusqu'
  • seeked
  • la recherche
  • sélectionnez
  • montrer
  • l'impasse
  • de stockage
  • soumettre
  • suspendre
  • timeupdate
  • annuler
  • décharger
  • volumechange
  • en attente

Maintenant, est-il possible de définir un gestionnaire d'événement global qui est appelée lors de tout événement à l'origine, se produit sur tout élément de la page? (Dans ce cas, je ne veux pas compter ces événements qui ont eu lieu sur des éléments parce qu'ils bouillonnait depuis un descendant de l'élément - c'est pourquoi j'ai écrit "à l'origine, se produit".)

Si cela n'est pas possible, est-il au moins possible de définir un gestionnaire d'événement qui est appelée lors de tout événement se propage jusqu'à la racine de l'arborescence DOM (qui est soit l' document de l'objet ou de l' window - objet à la fois devrait fonctionner)? (Je sais qu'il est possible d'arrêter le bouillonnement de la programmation, mais je voudrais utiliser ce gestionnaire d'événement sur une page qui n'a pas d'autres gestionnaires qui ont été définis sur les autres éléments.) (Aussi, je crois que certains évènements n'ont pas de bulle, mais nous allons ignorer ces cas, pour les besoins de cet argument.)

Je sais que je peux le faire (à l'aide de jQuery):

$(document).bind('abort afterprint beforeprint beforeunload etc.', function() {
    // handle event
});

mais qui serait plutôt indésirables solution pour moi.

btw, je n'ai pas besoin d'une solution de navigateur. Si cela fonctionne dans un seul navigateur, je vais bien.

Aussi, Firebug est en mesure de journal des événements, mais je voudrais être capable d'attraper le cas par programme (via JavaScript) plutôt que de l'avoir tout simplement connecté à la console.


Mise à jour: Ajout couper, copier, coller, focusin, focusout, mouseenter et mouseleave à la liste.

5voto

Pumbaa80 Points 27066

Je doute fortement qu'il y ait un moyen de faire cela dans Firefox. En regardant le code source de Firebug (en particulier la méthode attachAllListeners ), il s'avère que itérer dans une liste de noms d'événements est évidemment la voie à suivre, mais cela ne résout pas le problème.

3voto

josec89 Points 158

Il ne semble pas y avoir de «moyen facile» de le faire.

Mon idée: vous savez quels sont tous les événements, vous pouvez donc gérer tous les événements pour chaque élément DOM:

 var events =
[   
    "onabort",
    "onafterprint",
    "onbeforeprint",
    "onbeforeunload",
    ...

];

var root = document.body;
var elms = root.childNodes;

for(var i = 0; i < elms.length; i++)
{
    for(var j = 0; j < events.length; j++)
    {
        elms[i][events[j]] = globalHandler;
    }
}

function globalHandler()
{
    alert("Global handler called");
}
 

C'est l'idée "intuitive" mais cela ne semble pas très efficace. Cependant, cela devrait fonctionner.

Bonne chance.

2voto

oak Points 407

Vieille question, mais la réponse pourrait être utile à l'avenir utilisation: colonne vertébrale et la méthode de remplacement plus d'infos au ce que je veux dire, c'est d'utiliser "l'épine dorsale de procuration de la fonction"

EDIT:

Rappels liés à la spéciale "tous" événement sera déclenché lorsque tout l'événement se produit, et sont passés le nom de l'événement comme la première argument. Par exemple, le proxy tous les événements d'un objet à un autre:

  proxy.on("all", function(eventName) {
    object.trigger(eventName);
  });

épine dorsale des événements sur la fonction

si vous voulez capturer tous les événements DOM. juste envelopper de votre point de vue avec vue dorsale et vous pouvez capturer

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X