如何将所有相关的javascript添加到html元素

Question

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

例如:

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>