Simulating "focus" and "blur" in jQuery .live() method

Question

Update: As of jQuery 1.4, $.live() now supports focusin and focusout events.

---

jQuery currently¹ doesn't support "blur" or "focus" as arguments for the $.live() method. What type of work-around could I implement to achieve the following:

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

^{1. 07/29/2009, version 1.3.2}

Answer 1

Working solution:

(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);                 }             }         }     };  })(); 

Tested in IE/FF/Chrome. Should work exactly as you intended.

UPDATE: Teardowns now work.

Answer 2

This functionality is now included in jQuery core (as of 1.4.1).