bootstrap - onclick javascript

¿Cómo puedo ver el evento que está adjunto a un elemento html?

Question

Hola, soy un nuevo programador y sigo aprendiendo. Este es el código que intento descubrir:

<div id="buy" class="buy button">Buy</div>

Cuando hago clic en el div (botón), se ejecuta algún código de JavaScript, pero no sé si lo es. ¿Cómo puedo saber qué función se activa cuando ocurre el clic? De alguna forma, un oyente está unido a este elemento

Answer 1

1. Haga clic con el botón derecho en la página y elija ver la fuente de la página
2. Buscar etiquetas <script>
3. Busque $("#buy") y algo que mencione onClick o .on("click",function(){...});
4. Si no puede encontrarlo, busque algo en estas líneas: document.getElementById("buy")
5. Ha encontrado la function , o código, donde está el código del controlador de eventos

$("#buy") es la manera en que JQuery dice encontrar un elemento que tenga un atributo id de buy y si tiene un . si lo sigue con alguna función, esa función actúa sobre el elemento que encontró JQuery.

Answer 2

¿Estás usando jQuery? Si es así, quiere buscar una de estas tres líneas de código:

$("#buy").click //the div is refered by its id

o

$(".buy").click //the div is refered to by the style "buy"

o

$(".button").click //refered to by the style "button"

La mayoría de los navegadores más nuevos tienen "Herramientas de desarrollo" integradas presionando F12 (al menos en IE y Chrome). Eso puede ayudarte a hacer más depuración y rastreo.

Answer 3

A continuación hay algo que he usado en el pasado que creo que puede ser lo que estás buscando. Lo que hace es mirar una propiedad en un elemento de página (en el ejemplo a continuación, es la propiedad "Título" del documento) y luego mostrar una alerta con la pila de llamadas JS cada vez que se cambia esa propiedad. Deberá ingresar esto en el DOM antes del código que intenta encontrar, pero con suerte podrá identificar qué es lo que está causando el problema.

Recomendaría usar Firefox y obtener Firebug para la depuración de JavaScript.

// Call stack code
function showCallStack() {
   var f=showCallStack,result="Call stack:/n";

   while((f=f.caller)!==null) {
      var sFunctionName = f.toString().match(/^function (/w+)/(/)
      sFunctionName = (sFunctionName) ? sFunctionName[1] : ''anonymous function'';
      result += sFunctionName;
      result += getArguments(f.toString(), f.arguments);
      result += "/n";
   }
   alert(result);
}


function getArguments(sFunction, a) {
   var i = sFunction.indexOf('' '');
   var ii = sFunction.indexOf(''('');
   var iii = sFunction.indexOf('')'');
   var aArgs = sFunction.substr(ii+1, iii-ii-1).split('','')
   var sArgs = ''''; 
   for(var i=0; i<a.length; i++) {
      var q = (''string'' == typeof a[i]) ? ''"'' : '''';
      sArgs+=((i>0) ? '', '' : '''')+(typeof a[i])+'' ''+aArgs[i]+'':''+q+a[i]+q+'''';
   }
   return ''(''+sArgs+'')'';
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); }

// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);  

Answer 4

En las herramientas de desarrollador de Google Chrome (haga clic en el icono de llave inglesa> Herramientas> Herramientas de desarrollador), seleccione el elemento en la pestaña Elementos, a la derecha abra el panel "Escuchas de eventos" verá todos los eventos

Answer 5

Esta es la forma más fácil que he encontrado de cómo hacerlo: VisualEvent

Cuando se trabaja con eventos en Javascript, a menudo es fácil perder la pista de los eventos suscritos. Esto es particularmente cierto si está utilizando una gran cantidad de eventos, lo cual es típico en una interfaz moderna que emplea mejoras progresivas. Las bibliotecas Javascript también agregan otro grado de complejidad a los oyentes desde un punto de vista técnico, mientras que desde el punto de vista de los desarrolladores, ¡por supuesto pueden hacer la vida mucho más fácil! Pero cuando las cosas van mal, puede ser difícil rastrear por qué podría ser así.

Es debido a esto que he creado un bookmarklet de Javascript llamado Visual Event que muestra visualmente los elementos en una página que tienen eventos suscritos, qué son esos eventos y la función que el evento ejecutaría cuando se active. Esto está destinado principalmente para ayudar a la depuración, pero también puede ser muy interesante e informativo para ver los eventos suscritos en otras páginas.

Hay un botón de marcador que puede arrastrar a su barra de herramientas (FF o Chrome), luego haga clic en el botón en cualquier página donde desee ver los eventos adjuntos. ¡Funciona genial! (al menos para eventos conectados por jQuery u otras bibliotecas).

Answer 6

Los manejadores de eventos adjuntos utilizando el elemento tradicional.onclick element.onclick= handler o HTML <element onclick="handler"> se pueden recuperar trivialmente de la propiedad element.onclick del script o in-depurador.

Controladores de eventos adjuntos utilizando DOM Nivel 2 Eventos addEventListener métodos y IE''s attachEvent actualmente no se pueden recuperar del script en absoluto. DOM Level 3 una vez propuesto element.eventListenerList para obtener todos los oyentes, pero no está claro si esto llegará a la especificación final. No hay implementación en ningún navegador hoy.

Answer 7

No puedes hacerlo de una manera realmente buena "solo" usando ECMAscript. Por ejemplo, si había un controlador de evento click agregado por DOM Nivel 1 en forma de

document.getElementById(''buy'').onclick = function() {};

por supuesto, puede interceptar fácilmente esa propiedad en el nodo mismo. Las cosas se vuelven más complicadas si DOM Level 2 entra en juego con .addEventListener() respectevily .attachEvent() . Ahora, realmente no tiene un "lugar" para buscar dónde están vinculadas todas las diferentes funciones del oyente.

Mejora al usar jQuery. jQuery tendrá todas sus funciones de controlador de eventos en un objeto especial que está vinculado al nodo DOM de invocación. Puede verificarlo obteniendo la propiedad .data() -expando para un nodo como

$(''#buy'').data(''events'');

Sin embargo, ahora ya describí tres formas diferentes de vincular oyentes de eventos a un nodo (en realidad son dos porque una biblioteca como jQuery también usa métodos DOM Nivel 1 o 2, por supuesto).

Realmente se está poniendo feo si un evento es desencadenado por delegación. Eso significa que vinculamos nuestro evento de clic en algún nodo primario que está esperando que ese evento burbujee hacia nosotros para que podamos verificar el target . Entonces ahora ni siquiera tenemos una relación directa entre el node y el event listener .

La conclusión aquí es un complemento de navegador o algo parecido a VisualEvent .

Answer 8

Puede usar el script " Visual Event 2 " como marcador o el mismo script como la extensión de Chrome .

Este script muestra todos los eventos js asociados a dom-elements.

Answer 9

Si está utilizando FireFox, debe tener FireBug instalado. Una vez que tenga eso, puede instalar FireQuery, que le mostrará qué eventos jQuery están vinculados a qué objetos.

http://getfirebug.com/

http://firequery.binaryage.com/

Answer 10

Si usa Firefox y Firebug, puede intentar instalar FireQuery. Lo hará para que pueda ver los controladores vinculados por jQuery. http://firequery.binaryage.com/

Answer 11

Use jQuery("#buy").data(''events'');

http://api.jquery.com/jQuery.data/ puede ser interesante.