2011-03-14 9 views
7

Sto cercando un modo in cui posso elencare tutti i binding di listener di eventi creati con JS (o altri script di script) in un sito Web. Principalmente voglio scoprire doppie associazioni (per motivi di debug), ma suppongo che ci siano anche altri problemi.c'è un modo per ottenere tutti i binding di listener di eventi in javascript?

brillante sarebbe un plug-in per il browser, in cui è possibile visualizzare sul sito Web quali elementi sono associati a tipi di elenchi di eventi. Sai, alcune visualizzazione dei evento-ascoltatori ...

grazie per i collegamenti, gli script ei commenti ;-)

+2

c'è qualcosa di simile per jQuery. È un'estensione per firebug chiamato firequery: http://firequery.binaryage.com/ ma non so se funziona anche per eventi javascript nativi. – meo

+0

hm ... è un primo passo ... probabilmente ha bisogno di tempo per abituarsi – helle

risposta

2

C'è un solo tipo di dichiarazione di evento che si ottiene, non so se questo vi aiuterà a:

// Can't get 
myDiv.attachEvent ("onclick", function() {alert (1)}); 

// Can't get 
myDiv.addEventListener ("click", function() {alert (1)}, false); 

// Can't get 
<div onclick = "alert (1)"></div> 

// Can get 
myDiv.onclick = function() {alert (1)} 

si può guardare questo answer troppo. Ad ogni modo, ho creato una funzione per voi:

<!DOCTYPE html> 

<html> 
    <head> 
     <script> 
      function getAllEvents() { 
       var all = document.getElementsByTagName ("*"); 
       var _return = ""; 

       for (var i = 0; i < all.length; i ++) { 
        for (var ii in all[i]) { 
         if (typeof all[i][ii] === "function" && /^on.+/.test (ii)) { // Unreliable 
          _return += all[i].nodeName + " -> " + ii + "\n"; 
         } 
        } 
       } 

       return _return; 
      } 

      document.addEventListener ("DOMContentLoaded", function() { 
       var div = this.getElementsByTagName ("div")[0]; 

       div.onclick = function() { 
        alert (1); 
       } 

       div.onmouseout = function() { 
        alert (2); 
       } 

       alert (getAllEvents()); 
      }, false); 
     </script> 

     <style> 
      div { 
       border: 1px solid black; 
       padding: 10px; 
      } 
     </style> 
    </head> 

    <body> 
     <div></div> 
    </body> 
</html> 
4

Evento visivo (http://www.sprymedia.co.uk/article/Visual+Event+2) è molto utile. Vai a questa pagina e trascina il link "Evento visivo" nella barra dei segnalibri. Quando si desidera controllare una pagina, basta fare clic su di essa, attendere un secondo e gli eventi per ciascun elemento verranno sovrapposti sulla pagina.

1

Ho appena scritto uno script che consente di ottenere questo. Ti offre due funzioni globali: hasEvent(Node elm, String event) e getEvents(Node elm) che puoi utilizzare. Si noti che modifica il metodo EventTarget prototipo add/RemoveEventListener e non funziona per gli eventi aggiunti tramite markup HTML o la sintassi javascript di elm.on_event = ..., funziona solo per add/RemoveEventListener.

More info at GitHub

Live Demo

Script:

var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}(); 
Problemi correlati