Come ottenere tutto il javascript correlato a un elemento html

Question

C'è un modo per ottenere tutto il javascript associato a un elemento html in base al nome della classe restituito in un array? Qualche suggerimento su come si sarebbe riusciti a farlo? Ci sono pacchetti di nodi che mi consentono di fare qualcosa di simile?

Ad esempio:

HTML

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

JS

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

vorrei qualcosa di simile (pseudo-codice sia sul lato client o server):

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

uscita di meta()

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

Answer 1

Questo estrae tutti i gestori di eventi di tutti gli elementi di una data classe. Ma questi gestori devono essere collegati usando 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

È possibile utilizzare getEventListeners() which is part of the chrome devtools ma per l'impiego di lato client, c'è una questione possibile, duplicato che risponde in parte questo: How to find event listeners on a DOM node when debugging or from the JavaScript code? che sostanzialmente spettacoli (nel secondo votato risposta) che a seconda di come sono impostati gli eventi (attributo javascript, eventListener, jquery, altra lib) ci sono diversi modi per recuperare le funzioni.

Il programma Visual Evento 2 menzionato nella prima questione sembra essere più di una libreria a fare ciò che la seconda risposta sta suggerendo così forse questo risolverà il vostro problema.

Answer 3

Se si è interessati solo in soluzione jQuery io suggerisco di (suppongo c'è un solo evento per tipo, ma è necessario per scorrere su tutte le istanze):

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

Io personalmente ignorare addEventListener al posto giusto (che significa in cima), con alcune guardie di sicurezza.

purtroppo gestori di eventi jQuery sembrano essere abbastanza difficile da leggere ...

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>