如何将所有相关的 javascript 获取到 html 元素答案

【问题标题】：How to get all related javascript to an html element如何将所有相关的 javascript 获取到 html 元素
【发布时间】：2016-09-29 18:42:49
【问题描述】：

有没有办法通过数组中返回的类名来获取与 html 元素关联的所有 javascript？关于如何实现这一目标的任何建议？是否有任何节点包可以让我做这样的事情？

例如：

HTML

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

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

我想要类似的东西（客户端或服务器端的伪代码）：

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

meta() 的输出

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

【问题讨论】：

很有趣——你想获取所有绑定到特定 HTML 类的 js 函数吗？
@messerbill - 是的，我想通过选择器（类或属性等）提取与 html 元素相关的所有 js 函数。
@RonI 你能澄清你为什么需要这个吗？可能有一些更简单的解决方案。
@risabhdev - 我已经开始研究一种工具，可以让 Web 开发人员动态自动存储他们的 UI 源代码。

标签： javascript jquery node.js

【解决方案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() which is part of the chrome devtools，但对于使用客户端，有一个可能重复的问题部分回答了这个问题：How to find event listeners on a DOM node when debugging or from the JavaScript code? 基本上显示（在第二个投票答案中）取决于事件的设置方式（javascript 属性, eventListener, jquery, other lib) 有不同的方法来检索函数。

第一个问题中提到的 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>

【讨论】：