Simulación "enfoque" y "desenfoque" en el método jQuery .live()

Question

Actualización: A partir de jQuery 1.4, ahora es compatible con $.live()focusIn y focusOut eventos.

---

jQuery Actualmente no admite "desenfoque" o "enfoque" como argumentos para el método $.live(). ¿Qué tipo de trabajo en torno pude poner en práctica para lograr lo siguiente:

$("textarea") 
    .live("focus", function() { foo = "bar"; }) 
    .live("blur", function() { foo = "fizz"; }); 

^{. 29/07/2009, versión 1.3.2}

Answer 1

Solución de trabajo:

(function(){ 

    var special = jQuery.event.special, 
     uid1 = 'D' + (+new Date()), 
     uid2 = 'D' + (+new Date() + 1); 

    jQuery.event.special.focus = { 
     setup: function() { 
      var _self = this, 
       handler = function(e) { 
        e = jQuery.event.fix(e); 
        e.type = 'focus'; 
        if (_self === document) { 
         jQuery.event.handle.call(_self, e); 
        } 
       }; 

      jQuery(this).data(uid1, handler); 

      if (_self === document) { 
       /* Must be live() */ 
       if (_self.addEventListener) { 
        _self.addEventListener('focus', handler, true); 
       } else { 
        _self.attachEvent('onfocusin', handler); 
       } 
      } else { 
       return false; 
      } 

     }, 
     teardown: function() { 
      var handler = jQuery(this).data(uid1); 
      if (this === document) { 
       if (this.removeEventListener) { 
        this.removeEventListener('focus', handler, true); 
       } else { 
        this.detachEvent('onfocusin', handler); 
       } 
      } 
     } 
    }; 

    jQuery.event.special.blur = { 
     setup: function() { 
      var _self = this, 
       handler = function(e) { 
        e = jQuery.event.fix(e); 
        e.type = 'blur'; 
        if (_self === document) { 
         jQuery.event.handle.call(_self, e); 
        } 
       }; 

      jQuery(this).data(uid2, handler); 

      if (_self === document) { 
       /* Must be live() */ 
       if (_self.addEventListener) { 
        _self.addEventListener('blur', handler, true); 
       } else { 
        _self.attachEvent('onfocusout', handler); 
       } 
      } else { 
       return false; 
      } 

     }, 
     teardown: function() { 
      var handler = jQuery(this).data(uid2); 
      if (this === document) { 
       if (this.removeEventListener) { 
        this.removeEventListener('blur', handler, true); 
       } else { 
        this.detachEvent('onfocusout', handler); 
       } 
      } 
     } 
    }; 

})(); 

Probado en IE/FF/cromo. Debería funcionar exactamente como lo desea.

ACTUALIZACIÓN: Desmantelamientos ahora funcionan.

Answer 2

live() es el atajo de jQuery a event delegation. Para responder a su pregunta, vea Delegating the focus and blur events.

Es bastante ingenioso: para los navegadores que cumplen con los estándares él usa event capturing para atrapar esos eventos. Para IE, utiliza los eventos propios de IE focusin (para focus) y focusout (para), que sí funcionan, lo que permite la delegación tradicional de eventos.

Dejaré la migración a jQuery como ejercicio.

Answer 3

una más más: esta solución no admite más de un parámetro.

Traté:

$(el).live("focus blur", function(e) { 
    if (e.type == "focus") { 

etc.

y sólo se activa el evento desenfoque.

sin embargo, esta solución ha sido útil.

Answer 4

Esta funcionalidad ahora se incluye en jQuery core (a partir de 1.4.1).

Answer 5

que se han añadido en jQuery 1.4.1 ... ahora .live() función soporta fucus y el desenfoque de eventos =) Saludos

Answer 6

Parece que el problema es cuando el control de la event.type devuelve "focusin" & "focusOut"

$('input').live("focus blur", function(event){ 
    if (event.type == "focusin") { 
     console.log(event.type); 
    }else{ 
     console.log(event.type); 
    } 
});