Comprobar los eventos asociados a un elemento en JavaScript

in Javascript on by Gisela Torres

En momentos desesperados, cuando no conseguimos localizar el código sobre todo, es posible que necesitemos conocer qué eventos están siendo asociados a un elemento. Para poder ver este escenario en acción, os propongo el siguiente código:

<!DOCTYPE html>
<html>
<head>
	<title>Element events</title>
	<style>
	#content{
		width: 200px;
		height: 200px;
		background-color: blue;
	}
	</style>
</head>
<body>
	<div id="content">
	</div>
	<input id="btnGetEvents" type="button" value="Get handled events" />
	<div>
		<output id="result"></output>
	</div>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script>
	$(function(){
		var $content = $("#content");
		$content.hover(function(){
			$(this).css({backgroundColor: "red"});
		},function(){
			$(this).css({backgroundColor: "blue"});
		});
		var clickHandler = function(){
			alert("click");
		};
		$content.click(clickHandler);
		$content.click(function(){
			alert("Second click handler");
		});
		document.getElementById('content').addEventListener("click",function(){
			alert("addEventListener handler");
		});
		$("#btnGetEvents").click(function(){
			debugger;
			var events =  $._data($content[0], "events"),
			eventsResult = "";	
			$.each(events, function(index, element) {
				eventsResult += index + ":<br/>";
				$.each(events[index],function(ev,elemt){
					eventsResult += elemt.handler + "<br/>";
				})
			});
			$("#result").html(eventsResult);
		});
	});
	</script>
</body>
</html>

Básicamente lo que he hecho ha sido crear un elemento div y he asociado unos cuantos handlers a distintos eventos, de diferentes formas.

Si trabajamos con JQuery, existe una manera de obtener todos los eventos asociados a través de esta librería: $._data($content[0], «events»). Con esta llamada, conseguiremos un array de objetos con todos los eventos manejados y, dentro de los mismos, un conjunto de objetos por cada uno de los handlers asociados:

events content JQuery

A través del código anterior, he recorrido todos los elementos para mostrar cuál es el evento y cuáles son las funciones asociadas al mismo, generando el siguiente resultado:

JQuery events result

Esta aproximación puede ser muy útil cuando estamos depurando nuestro código, puesto que nos da una visión de todo lo que ocurre con el elemento. Sin embargo, en la imagen anterior podemos observar que hay un handler que no ha sido detectado, aquel registrado a través de addEventListener.

Si bien sería recomendable que todos los eventos se registraran de la misma forma, puede ocurrir este escenario y llevarnos a la confusión. Si tenemos esta sospecha, podemos utilizar como herramienta el tab Event Listeners de Chrome, donde nos lista, de una forma algo diferente, todos los handlers asociados, incluidos aquellos donde se utilizó JQuery:

Chrome Event Listeners tab

Espero que sea de utilidad.

¡Saludos!