Cómo crear eventos personalizados en vivo en jQuery

Question

jQuery tiene una carpeta de eventos muy útil llamada live() que agregará eventos a elementos DOM sobre la marcha (incluso para los elementos que se agregarán más tarde al DOM). El problema es que solo funciona en eventos específicos (listed here in documentation).

Realmente quiero tener eventos en vivo para el enfoque, desenfoque y cambio que no son compatibles con en vivo en este momento. Además, si puedo hacer eventos personalizados en vivo, será un gran cambio de juego para mi aplicación. La mayor parte del código que tengo ahora está dedicado a volver a vincular eventos antiguos (cambio, enfoque y eventos personalizados para hacer que los elementos se puedan arrastrar o cambiar de tamaño) a nuevos elementos dom que se han agregado a través de ajax.

¿Alguna idea? Supongo que la delegación de eventos es el camino a seguir, pero en este momento hará que el código sea más complicado. Tal vez un complemento que maneje delegaciones de eventos ... no estoy seguro. Ayúdame a encontrar una solución.

Answer 1

Esta funcionalidad ya está disponible en jQuery 1.4. live() ahora es compatible con todos los eventos de JavaScript (incluidos los eventos personalizados), y los eventos focusin y focusout se han introducido como versiones burbujeantes de focus y blur.

Desde el jQuery 1.4 documentation on .live():

A partir de jQuery 1.4, el método .live() soporta eventos personalizados, así como todos los eventos de JavaScript. Dos excepciones: ya que el enfoque y el desenfoque no son realmente eventos de burbujeo, necesitamos usar el enfoque y el enfoque en su lugar.

Answer 2

Si no está en jQuery es probable que haya una razón. Errores del navegador, etc. que lo hacen poco confiable. Me gustaría esperar hasta que implementen o trate de usar el plugin original que se convirtió en vivo http://docs.jquery.com/Plugins/livequery

Editar:

buenos chicos Downvote. Hay una razón por la que no está en jQuery y lo dudo mucho porque sea perezosa. De hecho, he pasado tiempo leyendo la fuente y buscando por qué solo ciertos eventos se implementan en vivo() y no puedo encontrar por qué. Entonces, si alguien sabe ... por favor, ilumínanos.

Answer 3

Utilicé con éxito el complemento livequery como complemento de la función .live() en jQuery. No solo puede vincular eventos como el enfoque, el desenfoque y el cambio (que live() aún no es compatible, a partir de 1.3.2), sino que también le proporciona un mecanismo para vincular eventos personalizados a elementos DOM sobre la marcha. Por ejemplo, lo usé para enlazar arrastrables y desplegables a algunos elementos DOM que se agregarán a través de Ajax. Hace que mi código sea mucho más simple de leer y más fácil de mantener.

Answer 4

jQuery's live() El método no funcionará porque los eventos de enfoque y desenfoque no se propagan (burbujean) como otros eventos DOM. El equipo jQuery eventualmente presentará esta funcionalidad, pero tendrá que ser artificial (borboteo manual).

Si no estaba usando jQuery y todavía quería los beneficios de live() me gustaría utilizar la captura de eventos en los navegadores que lo apoyaban (la mayoría de los navegadores no-IE) y en el IE me gustaría utilizar su onFocusIn/onFocusOut eventos (estos eventos, a diferencia del enfoque/desenfoque, hacen burbujas).

He aquí un ejemplo:

function onFocus(el, fn) { 
    var outerFn = function(e) { 
     e = e || window.event; 
     if ((e.target || e.srcElement) === el) { 
      fn.call(el); 
     } 
    }; 
    if (document.body.addEventListener) { 
     // This is event capturing: 
     document.body.addEventListener('focus', outerFn, true); 
    } else { 
     // This is event delegation: 
     document.body.attachEvent('onfocusin', outerFn); 
    } 
    return outerFn; 
} 

Su uso:

onFocus(document.getElementById('myInputField'), function(){ 
    log('FOCUSED!!!'); 
}); 

Una abstracción similares podrían utilizarse para desenfoque y cambiar los acontecimientos.

Leer más sobre orden de eventos (captura/burbujeo) aquí: http://www.quirksmode.org/js/events_order.html

---

También podría ser la pena señalar que livequery, el plugin de jQuery, funciona porque se re-une el caso de nuevos elementos ; solo funciona con los métodos de manipulación DOM de jQuery, como 'append', 'insertBefore', etc. Por lo tanto, si agregas un nuevo elemento sin usar jQuery, no funcionaría.

Answer 5

Es posible que desee comprobar el plugin jQuery.Listen de Ariel Flesley. Es similar al evento live() y al plugin livequery(), pero admite los eventos focus() y blur() del soporte.

http://flesler.blogspot.com/2007/10/jquerylisten.html