関連するすべてのjavascriptをhtml要素に取得する方法

Question

html要素に関連付けられたすべてのjavascriptをクラス名で配列に戻す方法はありますか？どのようにこれを行うことを達成するかについての任意の提案？このようなことをするためのノードパッケージはありますか？例えば

：

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

メタの出力（）

$('.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() which is part of the chrome devtoolsを使用することができますが、クライアント側を採用するため、部分的にこれを答えることができ、重複した質問があります：（第2に答えを投票）基本的に示してHow to find event listeners on a DOM node when debugging or from the JavaScript code?は、イベントがどのように設定されているか（javascript属性、eventListener、jquery、その他のlib）に応じて、関数を取得するさまざまな方法があります。

最初の質問に記載されているVisual Event 2プログラムは、2番目の答えが示唆しているようにライブラリのほうが多いようですが、おそらくこれが問題を解決します。

Answer 3

だけjQueryのソリューションに興味があるなら、私はあなた（私はタイプごとに1つだけのイベントがあるとしていますが、すべてのインスタンス上のサイクルに必要な）提案することができる：

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をオーバーライドします。あなたが特定のHTMLクラスにバインドされているすべてのJS関数を取得したい -

残念ながら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>