jQuery знайде обробників подій, зареєстрованих об'єктом

Мені потрібно знайти, які обробники подій зареєстровані над об’єктом.

Наприклад:

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

$("#el")має кнопку і MouseOver зареєстрований.

Чи є якась функція дізнатися це і, можливо, повторити його над обробниками подій?

Якщо неможливо на об’єкті jQuery належними методами, чи можливо це на простому об'єкті DOM?

Станом на jQuery 1.8, дані про подію більше не доступні в "загальнодоступному API" для даних. Прочитайте цю публікацію в блозі jQuery . Тепер слід використовувати це замість:

jQuery._data( elem, "events" );

elem має бути елементом HTML, а не об'єктом або селектором jQuery.

Зауважте, що це внутрішня, "приватна" структура, і її не слід змінювати. Використовуйте це лише для налагодження.

У старих версіях jQuery, можливо, доведеться використовувати старий метод, який є:

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

Ви можете зробити це, скануючи події (станом на jQuery 1.8+), наприклад:

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

Ось приклад, з яким можна грати:

$(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>

Для jQuery 1.8+ це більше не працюватиме, оскільки внутрішні дані розміщуються в іншому об'єкті.

Найновіший неофіційний (але працює і в попередніх версіях, принаймні в 1.7.2) - це робити зараз - $._data(element, "events")

Підкреслення ("_") - це те, що тут має значення. Внутрішній, він викликає $.data(element, name, null, true), останній (четвертий) параметр є внутрішнім ("pvt").

Безсоромний штекер, але ви можете використовувати findHandlerJS

Для його використання потрібно просто включити findHandlersJS (або просто скопіювати і вставити необроблений код JavaScript у вікно консолі хрому) та вказати тип події та селектор jquery для елементів, які вас цікавлять.

Для вашого прикладу ви можете швидко знайти обробників подій, про яких ви згадали

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

Ось що повертається:

• елемент
  Фактичний елемент, в якому був зареєстрований обробник подій
• події
  Масив з інформацією про обробників JQuery подій для даного типу подій , які ми зацікавлені в (наприклад , клацання, зміна і т.д.)
  • обробник
    Метод обробника фактичних подій, який ви можете побачити, клацнувши правою кнопкою миші та вибравши Показати визначення функції
  • селектор
    Селектор надав делеговані події. Він буде порожнім для прямих подій.
  • 
    Список цілей з елементами, на які спрямований цей обробник подій. Наприклад, для делегованого обробника подій, який зареєстрований у об'єкті документа та орієнтований на всі кнопки сторінки, це властивість буде перелічувати всі кнопки сторінки. Ви можете навести на них курсор і побачити їх виділеними хромом.

Ви можете спробувати тут

Я використовую eventbug плагін Firebug для цієї мети.

Я поєднав обидва рішення від @jps до однієї функції:

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

Але будьте обережні, ця функція може повертати лише події, встановлені за допомогою самого jQuery.

Станом на 1.9 немає жодного документально підтвердженого способу відновлення подій, окрім використання плагіна Migrate для відновлення старої поведінки. Ви можете використовувати метод _.data () як згадування jps, але це внутрішній метод. Тому просто зробіть правильно, і використовуйте плагін Migrate, якщо вам потрібна ця функціональність.

З документації jQuery на .data("events")

До 1.9 .data ("події") можна було б використовувати для отримання недокументованої внутрішньої структури даних про jQuery для елемента, якщо жоден інший код не визначив елемент даних з назвою "події". Цей особливий випадок було вилучено в 1.9. Немає публічного інтерфейсу для отримання цієї внутрішньої структури даних, і він залишається недокументованим. Однак плагін jQuery Migrate відновлює цю поведінку для коду, який залежить від нього.

Щоб перевірити наявність подій на елементі:

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

Зауважте, що це буде працювати лише з прямими обробниками подій, якщо ви використовуєте $ (document) .on ("ім'я події", "jq-селектор", функція () {// логіка}), ви хочете побачити getEvents функція внизу цієї відповіді

Наприклад:

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

або

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

Повний приклад:

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

Більш повний спосіб перевірити, що включає динамічні слухачі, встановлені з $ (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;
}

Приклад використання:

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

Я створив спеціальний селектор jQuery, який перевіряє як кеш jQuery призначених обробників подій, так і елементи, що використовують нативний метод для їх додавання:

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

Приклад:

$(":event(click)")

Це поверне елементи, до яких прикріплений обробник кліків.

У сучасному браузері з ECMAScript 5.1 / Array.prototype.mapви також можете використовувати

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

у вашій консолі браузера, на якій буде надруковано джерело обробників, розміщена кома. Корисно для огляду того, що все працює на певній події.

Події можна отримати за допомогою:

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

або jQuery 1.8+:

jQuery._data(elem, 'events');

Примітка. Події, обмежені використанням, $('selector').live('event', handler) можна отримати за допомогою:

jQuery(document).data('events')

Маю сказати, що багато відповідей цікаві, але останнім часом у мене була подібна проблема, і рішення було надзвичайно простим шляхом проходження DOM шляхом. Він відрізняється тим, що ви не повторюєте, а орієнтуєтесь безпосередньо на потрібну вам подію, але нижче я дам більш загальну відповідь.

У мене було зображення підряд:

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

І до цього зображення було додано обробник подій клацання:

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

Мій намір полягав у тому, щоб розширити область для натискання на весь ряд, тому я спершу отримав усі зображення та відносні рядки:

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

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

Тепер у фактичній лінійці я просто зробив наступне, даючи відповідь на початкове запитання:

tr.click(this.onclick);

Тому я взяв обробник подій безпосередньо з елемента DOM і помістив його в обробник подій jQuery click. Працює як шарм.

Тепер до загальної справи. У старі часи до jQuery ви могли отримати всі події, прикріплені до об'єкта, за допомогою двох простих, але потужних функцій, обдарованих нам смертним Дугласом Крокфордом :

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

Спробуйте плагін для відладки jquery, якщо ви використовуєте хром: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=uk

Ще один спосіб зробити це просто використовувати jQuery для захоплення елемента, а потім пройти фактичний Javascript, щоб отримати та встановити та грати з обробниками подій. Наприклад:

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

Я поєднав деякі відповіді вище та створив цей божевільний, але функціональний сценарій, який, сподіваємось, перераховує більшість слухачів події щодо даного елемента. Сміливо оптимізуйте його тут.

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 не дозволяє просто отримувати доступ до подій для даного елемента. Ви можете отримати доступ до них, використовуючи недокументований внутрішній метод

$._data(element, "events")

Але це все одно не дасть вам усіх подій, якщо бути точним, не буде показано вам події, призначені для

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

Ці події зберігаються всередині документа, тому їх можна отримати, переглянувши їх

$._data(document, "events")

але це важка робота, оскільки є події для цілої веб-сторінки.

Том G вище створив функцію, яка фільтрує документ лише за подіями заданого елемента та об'єднує вихід обох методів, але у нього є недолік дублювання подій у висновку (і ефективно у внутрішньому списку подій jQuery елемента, що змішується з вашим додатком). Я усунув цей недолік, і ви можете знайти код нижче. Просто вставте його в консоль розробника або в код додатка і виконайте його, коли потрібно, щоб отримати хороший список усіх подій для даного елемента.

Що важливо помітити, елементом насправді є HTMLElement, а не об'єкт 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;
}