Как получить все связанные javascript с элементом html

Есть ли способ получить все javascript, связанные с элементом html, по имени класса, возвращаемому в массиве? Любое предложение о том, как можно было бы это сделать? Существуют ли пакеты node, которые позволили бы мне сделать что-то вроде этого?

Например:

HTML

<div class="click_me">Click Me</div>

$('.click_me').on('click', function() { alert ('hi') });

Мне хотелось бы что-то вроде (psuedo-код либо на стороне клиента, либо на стороне сервера):

function meta() {
   let js = [];
   js = getAllJavascriptByClassName('click_me');
   console.log(js[0]);
}

Вывод мета()

$('.click_me').on('click', function() { alert ('hi') });

Ответ 1

Это вытащит все обработчики событий всех элементов данного класса. Но эти обработчики должны быть прикреплены с помощью jquery.

function getAllEventHandlersByClassName(className) {
  var elements = $('.' + className);
  var results = [];
  for (var i = 0; i < elements.length; i++) {
    var eventHandlers = $._data(elements[i], "events");
    for (var j in eventHandlers) {
      var handlers = [];
      var event = j;
      eventHandlers[event].forEach(function(handlerObj) {
        handlers.push(handlerObj.handler.toString());

      });
      var result = {};
      result[event] = handlers;
      results.push(result);

    }

  }
  return results;
}

// demo

$('.target').on('click',function(event){
  alert('firstClick handler')
});
$('.target').on('click',function(event){
  alert('secondClick handler')
});
$('.target').on('mousedown',function(event){
  alert('firstClick handler')
});
console.log(getAllEventHandlersByClassName('target'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='target'> </div>

Ответ 2

Вы можете использовать getEventListeners(), который является частью chrome devtools, но для использования на стороне клиента существует возможный дублирующий вопрос, который частично отвечает на это: Как найти прослушиватели событий на DOM node при отладке или из кода JavaScript?, который в основном показывает (во втором голосовавшем ответе), что в зависимости от того, как события заданы (атрибут javascript, eventListener, jquery, другая библиотека), существуют различные способы извлечения функций.

Программа Visual Event 2, упомянутая в первом вопросе, скорее всего, является библиотекой, которая делает то, что предлагает второй ответ, возможно, это решит вашу проблему.

Ответ 3

Если вас интересует только решение jQuery, я могу вам предложить (я предполагаю, что для каждого типа есть только одно событие, но вам нужно циклически выполнять все экземпляры):

function getAllJavascriptByClassName(className) {
  var elem = $('.' + className);
  var result = [];

  $('.' + className).each(function(index, element) {
    var resultObjs = jQuery._data(element, "events");
    var partialResult = [];
    var x = Object.keys(resultObjs).forEach(function(currentValue, index, array) {
      partialResult.push(resultObjs[currentValue][0].handler.toString());
    });
    result.push(partialResult);
  });
  return result;
}
function meta() {
  let js = [];
  js = getAllJavascriptByClassName('click_me');
  console.log(JSON.stringify(js, null, 4));
}
$(function () {
  $('.click_me').on('click', function (e) {
    alert('Click event: hi')
  });
  $('.click_me:last').on('keypress', function (e) {
    alert('Keypress event: hi')
  });
  meta();
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<div class="click_me">Click Me</div>
<div class="click_me">Click Me</div>

Ответ 4

Я бы лично переопределил addEventListener в нужном месте (то есть на самом верху) с некоторыми безопасными охранниками.

К сожалению, обработчики событий jQuery к сожалению очень трудно читать...

var element = document.getElementById("zou");

element.addEventListener("click", function(e) {
  console.log("clicked from addevent");
});

element.addEventListener("mouseup", function(e) {
  console.log("mouseup from addevent");
});

$(element).on("mousedown", function(e) {
  console.log("mousedown from $")
});

console.log(element.getListeners());

<script>
  window.eventStorage = {};

  (function() {
    var old = HTMLElement.prototype.addEventListener;

    HTMLElement.prototype.addEventListener = function(a, b, c) {
      if (!window.eventStorage[this]) {
        window.eventStorage[this] = [];
      }

      var val = {
        "event": a,
        "callback": b
      };

      var alreadyRegistered = false;
      var arr = window.eventStorage[this];
      for (var i = 0; i < arr.length; ++i) {
        if (arr.event == a && arr.callback == b) {
          alreadyRegistered = true;
          break;
        }
      }
      if (!alreadyRegistered) {
        arr.push(val);
      }
      old.call(this, a, b, c);
    }

    HTMLElement.prototype.getListeners = function() {
      return window.eventStorage[this] || {};
    }
  }());
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zou">click on me</div>