Hay una opción posible basada en esta pregunta del sitio en inglés (y en concreto en las respuestas de dowski y de Avram Lavinsky), usando eventos personalizados, los metadatos que jQuery proporciona con $._data()
, y sabiendo que los eventos se ejecutan en el orden en el que se asociaron al elemento.
La idea (que sólo funcionaría con los eventos asociados con jQuery) sería la siguiente:
A simple vista parece simple, ¿no? Y el código no sería muy complejo tampoco:
// asociamos un event listener con el elemento
// MUY IMPORTANTE: esto debe ejecutarse antes de que cualquier otro event listener se añada
$(elemento).on("click", function(e) {
if (e) {
// prevenimos la propagación del resto de eventos click
e.stopImmediatePropagation();
// obtenemos una lista con las acciones asociadas al evento click
var lectoresEvento = $._data(this, "events").click;
// para cada elemento de la lista
for (var x = 0; x < aClickListeners.length; x++) {
// ejecutar la función
aClickListeners[x].handler();
}
// invocar el evento personalizado afterclick
$(this).trigger("afterclick")
}
});
La idea sería ejecutar ese código en tu biblioteca, después de cargar jQuery y antes de cargar cualquier otro código. Más adelante se podrá asociar (o no) el evento afterclick
a los diferentes elementos.
El evento personalizado se ejecutará siempre al final de todos los clicks; y si no hay ninguno, se ejecutará de todos modos (algo así como el finally
en las excepciones).
Ventajas de este método:
- Funciona :P
- No necesitas saber cuántos controladores de eventos se han creado, ni su nombre. Todos aparecerán ordenados en la lista de
$._data()
.
Inconvenientes de este método:
- Sólo funciona dentro del universo de jQuery.
$._data(this, "events")
no funciona en versiones anteriores a la 1.8, para esas habría que modificar un poco el código y usar element.data('events')
(como se explica en esta pregunta del sitio en inglés).
Aquí dejo un ejemplo (se pueden ver los resultados en la consola):
// Asociamos un evento click a todos los elementos
$("*").on("click", function(e) {
if (e) {
e.stopImmediatePropagation();
var lectoresClick = $._data(this, "events").click;
for (var x = 0; x < lectoresClick.length; x++) {
lectoresClick[x].handler();
}
$(this).trigger("afterclick");
}
});
// definimos las acciones que se ejecutarán después de todas las acciones del evento click
$("button").on("afterclick", function() {
console.log("Ejecutados todos los eventos click de " + $(this).attr("id"));
});
// asociamos diferentes acciones al evento click de los botones
$("#Boton1").on("click", function() { console.log("Primer evento botón 1"); });
$("#Boton2").on("click", function() { console.log("Primer (y único) evento botón 2"); });
$("#Boton1").on("click", function() { console.log("Segundo evento botón 1"); });
$("#Boton1").on("click", function() { console.log("Tercer evento botón 1"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="Boton1">Botón 1</button>
<button id="Boton2">Botón 2</button>
<button id="Boton3">Botón 3</button>