jQuery rechercher des gestionnaires d'événements enregistrés avec un objet

J'ai besoin de savoir quels gestionnaires d'événements sont enregistrés sur un objet.

Par exemple:

$("#el").click(function() {...});
$("#el").mouseover(function() {...});

$("#el")a un clic et un survol enregistrés.

Existe-t-il une fonction pour le découvrir et éventuellement parcourir les gestionnaires d'événements?

Si ce n'est pas possible sur un objet jQuery par des méthodes appropriées, est-ce possible sur un objet DOM ordinaire?

Depuis jQuery 1.8, les données d'événement ne sont plus disponibles à partir de "l'API publique" pour les données. Lisez cet article de blog jQuery . Vous devriez maintenant utiliser ceci à la place:

jQuery._data( elem, "events" );

elem doit être un élément HTML, pas un objet jQuery ou un sélecteur.

Veuillez noter qu'il s'agit d'une structure interne «privée» et ne doit pas être modifiée. Utilisez-le uniquement à des fins de débogage.

Dans les anciennes versions de jQuery, vous pourriez avoir à utiliser l'ancienne méthode qui est:

jQuery( elem ).data( "events" );

Vous pouvez le faire en explorant les événements (à partir de jQuery 1.8+), comme ceci:

$.each($._data($("#id")[0], "events"), function(i, event) {
  // i is the event type, like "click"
  $.each(event, function(j, h) {
    // h.handler is the function being called
  });
});

Voici un exemple avec lequel vous pouvez jouer:

$(function() {
  $("#el").click(function(){ alert("click"); });
  $("#el").mouseover(function(){ alert("mouseover"); });

  $.each($._data($("#el")[0], "events"), function(i, event) {
    output(i);
    $.each(event, function(j, h) {
        output("- " + h.handler);
    });
  });
});

function output(text) {
    $("#output").html(function(i, h) {
        return h + text + "<br />";
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="el">Test</div>
<code>
    <span id="output"></span>
</code>

Pour jQuery 1.8+, cela ne fonctionnera plus car les données internes sont placées dans un objet différent.

La dernière façon non officielle (mais qui fonctionne également dans les versions précédentes, au moins en 1.7.2) est maintenant - $._data(element, "events")

Le trait de soulignement ("_") fait la différence ici. En interne, il appelle $.data(element, name, null, true), le dernier (quatrième) paramètre est interne ("pvt").

Prise sans vergogne , mais vous pouvez utiliser findHandlerJS

Pour l'utiliser, il vous suffit d'inclure findHandlersJS (ou simplement de copier-coller le code javascript brut dans la fenêtre de la console de chrome) et de spécifier le type d'événement et un sélecteur jquery pour les éléments qui vous intéressent.

Pour votre exemple, vous pouvez trouver rapidement les gestionnaires d'événements que vous avez mentionnés en faisant

findEventHandlers("click", "#el")
findEventHandlers("mouseover", "#el")

C'est ce qui est retourné:

• élément
  L' élément réel dans lequel le gestionnaire d'événements a été enregistré
• événements
  Tableau contenant des informations sur les gestionnaires d'événements jquery pour le type d'événement qui nous intéresse (par exemple, clic, modification, etc.)
  • gestionnaire
    Méthode de gestionnaire d'événements réels que vous pouvez voir en cliquant dessus avec le bouton droit et en sélectionnant Afficher la définition de la fonction
  • sélecteur
    Le sélecteur fourni pour les événements délégués. Il sera vide pour les événements directs.
  • cibles
    Liste avec les éléments que ce gestionnaire d'événements cible. Par exemple, pour un gestionnaire d'événements délégué qui est enregistré dans l'objet document et cible tous les boutons d'une page, cette propriété répertorie tous les boutons de la page. Vous pouvez les survoler et les voir surlignés en chrome.

Vous pouvez l'essayer ici

J'utilise eventbug plugin Firebug à cette fin.

J'ai combiné les deux solutions de @jps à une seule fonction:

jQuery.fn.getEvents = function() {
    if (typeof(jQuery._data) === 'function') {
        return jQuery._data(this.get(0), 'events') || {};
    }

    // jQuery version < 1.7.?
    if (typeof(this.data) === 'function') {
        return this.data('events') || {};
    }

    return {};
};

Mais attention, cette fonction ne peut renvoyer que les événements définis à l'aide de jQuery lui-même.

Depuis la version 1.9, il n'existe aucun moyen documenté de récupérer les événements, à part utiliser le plug-in Migrate pour restaurer l'ancien comportement. Vous pouvez utiliser la méthode _.data () comme le mentionne jps, mais il s'agit d'une méthode interne. Faites donc ce qu'il faut et utilisez le plugin Migrate si vous avez besoin de cette fonctionnalité.

Depuis la documentation jQuery sur .data("events")

Avant la version 1.9, .data ("événements") pouvait être utilisé pour récupérer la structure de données d'événement interne non documentée de jQuery pour un élément si aucun autre code n'avait défini un élément de données avec le nom "événements". Ce cas spécial a été supprimé en 1.9. Il n'y a pas d'interface publique pour récupérer cette structure de données interne et elle reste non documentée. Cependant, le plugin jQuery Migrate restaure ce comportement pour le code qui en dépend.

Pour rechercher des événements sur un élément:

var events = $._data(element, "events")

Notez que cela ne fonctionnera qu'avec les gestionnaires d'événements directs, si vous utilisez $ (document) .on ("nom-événement", "jq-sélecteur", fonction () {// logique}), vous voudrez voir le La fonction getEvents au bas de cette réponse

Par exemple:

 var events = $._data(document.getElementById("myElemId"), "events")

ou

 var events = $._data($("#myElemId")[0], "events")

Exemple complet:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <script>
            $(function() {
                $("#textDiv").click(function() {
                    //Event Handling
                });
                var events = $._data(document.getElementById('textDiv'), "events");
                var hasEvents = (events != null);
            });
        </script>
    </head>
    <body>
        <div id="textDiv">Text</div>
    </body>
</html>

Une façon plus complète de vérifier, qui inclut des écouteurs dynamiques, installés avec $ (document) .on

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    for(var evntType in allDocEvnts) {
        if(allDocEvnts.hasOwnProperty(evntType)) {
            var evts = allDocEvnts[evntType];
            for(var i = 0; i < evts.length; i++) {
                if($(element).is(evts[i].selector)) {
                    if(elemEvents == null) {
                        elemEvents = {};
                    }
                    if(!elemEvents.hasOwnProperty(evntType)) {
                        elemEvents[evntType] = [];
                    }
                    elemEvents[evntType].push(evts[i]);
                }
            }
        }
    }
    return elemEvents;
}

Exemple d'utilisation:

getEvents($('#myElemId')[0])

J'ai créé un sélecteur jQuery personnalisé qui vérifie à la fois le cache jQuery des gestionnaires d'événements affectés ainsi que les éléments qui utilisent la méthode native pour les ajouter:

(function($){

    $.find.selectors[":"].event = function(el, pos, match) {

        var search = (function(str){
            if (str.substring(0,2) === "on") {str = str.substring(2);}
            return str;
        })(String(match[3]).trim().toLowerCase());

        if (search) {
            var events = $._data(el, "events");
            return ((events && events.hasOwnProperty(search)) || el["on"+search]);
        }

        return false;

    };

})(jQuery);

Exemple:

$(":event(click)")

Cela renverra des éléments auxquels un gestionnaire de clics est attaché.

Dans un navigateur moderne avec ECMAScript 5.1 / Array.prototype.map, vous pouvez également utiliser

jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;});

dans la console de votre navigateur, qui affichera la source des gestionnaires, séparés par des virgules. Utile pour jeter un œil à tout ce qui se déroule sur un événement particulier.

Les événements peuvent être récupérés en utilisant:

jQuery(elem).data('events');

ou jQuery 1.8+:

jQuery._data(elem, 'events');

Remarque: Les événements liés à l'aide $('selector').live('event', handler) peuvent être récupérés à l'aide de:

jQuery(document).data('events')

Je dois dire que la plupart des réponses sont intéressantes, mais récemment, j'ai eu un problème similaire et la solution était extrêmement simple en suivant la voie DOM. C'est différent parce que vous n'itérez pas mais visez directement l'événement dont vous avez besoin, mais ci-dessous, je donnerai une réponse plus générale.

J'avais une image d'affilée:

<table>
  <td><tr><img class="folder" /></tr><tr>...</tr></td>
</table>

Et cette image était associée à un gestionnaire d'événements Click:

imageNode.click(function () { ... });

Mon intention était d'étendre la zone cliquable à toute la ligne, j'ai donc d'abord obtenu toutes les images et les lignes relatives:

tableNode.find("img.folder").each(function () {
  var tr;

  tr = $(this).closest("tr");
  // <-- actual answer
});

Maintenant, dans la ligne de réponse réelle , je viens de faire comme suit, en donnant une réponse à la question d'origine:

tr.click(this.onclick);

J'ai donc récupéré le gestionnaire d'événements directement à partir de l'élément DOM et l'ai placé dans le gestionnaire d'événements click jQuery. Fonctionne comme un charme.

Passons maintenant au cas général. Dans les anciens jours pré-jQuery, vous pouviez obtenir tous les événements attachés à un objet avec deux fonctions simples mais puissantes offertes aux mortels par Douglas Crockford :

function walkTheDOM(node, func)
{
  func(node);
  node = node.firstChild;
  while (node)
  {
    walkTheDOM(node, func);
    node = node.nextSibling;
  }
}

function purgeEventHandlers(node)
{
  walkTheDOM(node, function (n) {
    var f;

    for (f in n)
    {
      if (typeof n[f] === "function")
      {
        n[f] = null;
      }
    }
  });
}

Essayez le plug-in de débogage jquery si vous utilisez Chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en

Une autre façon de le faire est d'utiliser simplement jQuery pour saisir l'élément, puis de parcourir le Javascript réel pour obtenir et définir et jouer avec les gestionnaires d'événements. Par exemple:

var oldEventHandler = $('#element')[0].onclick;
// Remove event handler
$('#element')[0].onclick = null;
// Switch it back
$('#element')[0].onclick = oldEventHandler;

J'ai combiné certaines des réponses ci-dessus et créé ce script fou mais fonctionnel qui répertorie, espérons-le, la plupart des auditeurs d'événements sur l'élément donné. N'hésitez pas à l'optimiser ici.

var element = $("#some-element");

// sample event handlers
element.on("mouseover", function () {
  alert("foo");
});

$(".parent-element").on("mousedown", "span", function () {
  alert("bar");
});

$(document).on("click", "span", function () {
  alert("xyz");
});

var collection = element.parents()
  .add(element)
  .add($(document));
collection.each(function() {
  var currentEl = $(this) ? $(this) : $(document);
  var tagName = $(this)[0].tagName ? $(this)[0].tagName : "DOCUMENT";
  var events = $._data($(this)[0], "events");
  var isItself = $(this)[0] === element[0]
  if (!events) return;
  $.each(events, function(i, event) {
    if (!event) return;
    $.each(event, function(j, h) {
      var found = false;        
      if (h.selector && h.selector.length > 0) {
        currentEl.find(h.selector).each(function () {
          if ($(this)[0] === element[0]) {
            found = true;
          }
        });
      } else if (!h.selector && isItself) {
        found = true;
      }

      if (found) {
        console.log("################ " + tagName);
        console.log("event: " + i);
        console.log("selector: '" + h.selector + "'");
        console.log(h.handler);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-element">
  <span id="some-element"></span>
</div>

jQuery ne vous permet pas d'accéder simplement aux événements d'un élément donné. Vous pouvez y accéder en utilisant une méthode interne non documentée

$._data(element, "events")

Mais cela ne vous donnera toujours pas tous les événements, pour être précis ne vous montrera pas les événements assignés avec

$([selector|element]).on()

Ces événements sont stockés dans le document, vous pouvez donc les récupérer en parcourant

$._data(document, "events")

mais c'est un travail difficile, car il y a des événements pour toute la page Web.

Tom G ci-dessus a créé une fonction qui filtre le document uniquement pour les événements de l'élément donné et fusionne la sortie des deux méthodes, mais il comportait un défaut de duplication des événements dans la sortie (et en fait sur la liste d'événements internes jQuery de l'élément qui dérange votre application). J'ai corrigé cette faille et vous pouvez trouver le code ci-dessous. Collez-le simplement dans votre console de développement ou dans le code de votre application et exécutez-le si nécessaire pour obtenir une belle liste de tous les événements pour l'élément donné.

Ce qui est important à noter, l'élément est en fait HTMLElement, pas l'objet jQuery.

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    function equalEvents(evt1, evt2)
    {
        return evt1.guid === evt2.guid;
    }

    for(var evntType in allDocEvnts) {
        if(allDocEvnts.hasOwnProperty(evntType)) {
            var evts = allDocEvnts[evntType];
            for(var i = 0; i < evts.length; i++) {
                if($(element).is(evts[i].selector)) {
                    if(elemEvents == null) {
                        elemEvents = {};
                    }
                    if(!elemEvents.hasOwnProperty(evntType)) {
                        elemEvents[evntType] = [];
                    }
                    if(!elemEvents[evntType].some(function(evt) { return equalEvents(evt, evts[i]); })) {
                        elemEvents[evntType].push(evts[i]);
                    }
                }
            }
        }
    }
    return elemEvents;
}