如何获取所有相关的JavaScript到一个HTML元素

有没有办法通过在数组中返回的类名来获取与html元素相关联的所有javascript？ 任何build议如何能做到这一点？ 有没有任何节点包可以让我做这样的事情？

例如：

HTML

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

JS

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

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

Answer 2

你可以使用getEventListeners（），它是chrome devtools的一部分，但是对于使用客户端，有一个可能的重复的问题部分地回答了这个问题： 如何在debugging时或者从JavaScript代码中findDOM节点上的事件监听器？ 这基本上显示（在第二个投票的答案），取决于如何设置事件（JavaScript属性，eventListener，jQuery，其他库）有不同的方式来检索function。

在第一个问题中提到的视觉事件2程序似乎更像是一个图书馆做第二个答案的build议，所以也许这将解决您的问题。

Answer 3

如果您只对jQuery解决scheme感兴趣，我可能会build议您（我假设每个types只有一个事件，但是您需要在所有实例上循环）：

 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> 

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