2011-05-01 17 views

Respuesta

41

hay una manera sencilla (pero no exacta) para poner a prueba todos los eventos:

function getAllEvents(element) { 
    var result = []; 
    for (var key in element) { 
     if (key.indexOf('on') === 0) { 
      result.push(key.slice(2)); 
     } 
    } 
    return result.join(' '); 
} 

continuación, se unen todos los eventos de la siguiente manera:

var el = $('#some-el'); 
el.bind(getAllEvents(el[0]), function(e) { 
    /* insert your code */ 
}); 
+2

No hace absolutamente nada para textarea o el botón de tipo de entrada en Chrome 12 y FF 5. – Bobby

+1

@Bobby Faltaba '.slice (2)' - Lo arreglé. –

3

No creo que jQuery es compatible con cualquier comodín (que sería difícil y lleno de peligros), pero la lista de eventos estándar es finito (aunque por desgracia un poco hacia fuera a través de la DOM2 events spec, DOM2 HTML spec y DOM3 events spec), siempre puede simplemente enumerarlos. jQuery no le permiten dar varios nombres de eventos de obligar (espacio delimitado), ej .:

$('#some-el').bind('click dblclick mouseover mouseout' /* etc.*/,function(e){ 
    console.log(e.type); 
}); 
+0

Aquí está una lista de todos los eventos posibles (de la fuente jQuery): Falta de definición foco focusin carga focusOut descarga cambiar el tamaño de desplazamiento clic dblclick mousedown mouseup mousemove encima del ratón mouseout MouseEnter mouseleave cambio seleccione Enviar keydown pulsación de tecla keyup error contextual – Armin

+0

Por desgracia, hay navegador específico (?) eventos como 'cortar' y 'pegar' por ejemplo. Además de eventos personalizados por supuesto. –

+0

@Armin jQuery parece no mencionar el evento 'onwheel'. – user31782

7

Si desea enlazar múltiples eventos para la misma función, sólo tiene que separar con espacios.

$("#test").bind("blur focus focusin focusout load resize scroll unload click " + 
    "dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + 
    "mouseleave change select submit keydown keypress keyup error", function(e){ 
    $("#r").empty().text(e.type); 
}); 

Simple example on jsfiddle

6

jQuery cambió cómo guarda eventos, hay a couple ways to extract the list dependiendo de la versión que estés usando. Tengo encapsulated the "most recent" version in a plugin, pero en esencia lo que quiero:

var events = $._data($('yourelement')[0], "events"); 

Esto da una lista jerarquizada de todos los eventos consolidados, agrupados por el evento "base" (sin espacio de nombres).

Sin embargo, me he dado cuenta de que desea que todos los eventos nativos jQuery - se puede inspeccionar $.event, que cuenta con algunos de ellos bajo $.event.special, pero el accepted answer todavía puede ser su mejor apuesta. También puede consultar lo que jQuery lists as possible binding functions.

39

También puede redefinir jQuery.event.trigger para atrapar cada evento, pero, en mi opinión, este método sólo es posible para explorar API externa, no para la producción:

var oldJQueryEventTrigger = jQuery.event.trigger; 
jQuery.event.trigger = function(event, data, elem, onlyHandlers) { 
    console.log(event, data, elem, onlyHandlers); 
    oldJQueryEventTrigger(event, data, elem, onlyHandlers); 
} 
+2

Esto hace exactamente lo que esperaba que hiciera. +1 – RedYetiCo

0

he tomado el guión de Mark Coleman y mejorado un poco para mis necesidades.

me gustaría compartirlo con ustedes: http://jsfiddle.net/msSy3/65/

var lastEvent = null, 
    countEvent = 0; 
$("#test").bind("blur focus focusin focusout load resize scroll unload click" + " dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function (e) { 
    if (lastEvent !== e.type) { 
     countEvent++; 
     $("#r").prepend("<span>" + countEvent + ": " + e.type + "<br></span>"); 
     $("#r > span:nth-child(21)").remove(); 
     lastEvent = e.type; 
    } 
}); 
4

Aquí es una pequeña extensión para jQuery:

$.fn.onAny = function(cb){ 
    for(var k in this[0]) 
    if(k.search('on') === 0) 
     this.on(k.slice(2), function(e){ 
     // Probably there's a better way to call a callback function with right context, $.proxy() ? 
     cb.apply(this,[e]); 
     }); 
    return this; 
};  

Uso:

$('#foo').onAny(function(e){ 
    console.log(e.type); 
}); 

También puedes usar el navegador consola (desde this answer):

monitorEvents($0, 'mouse'); // log all events of an inspected element 
monitorEvents(document.body); // log all events on the body 
monitorEvents(document.body, 'mouse'); // log mouse events on the body 
monitorEvents(document.body.querySelectorAll('input')); // log all events on inputs 
Cuestiones relacionadas