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

live() is jQuery's shortcut to event delegation. To answer your question, see Delegating the focus and blur events.

It's pretty ingenious: for standards compliant browsers he uses event capturing to trap those events. For IE he uses IE's proprietary focusin (for focus) and focusout (for blur) events, which do bubble, allowing traditional event delegation.

I'll leave the porting of it to jQuery as an exercise.

Answer 2

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 3

How does the above example work?

The original query was:

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

I can't see how the working example given relates to that. For instance, whats with the date variables, and what is the teardown function?

I appreciate that this is not an answer, but I don't know how to post questions that follow up existing answers.

Answer 4

one more addition: this solution does not support more than one parameter.

i tried:

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

etc.

and it only fired the blur event.

nevertheless this solution has been helpful.

Answer 5

VERY COOL!!! Thank you so much for taking the time to post this. It worked really well for me.

Answer 6

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

Answer 7

they have been added on jquery 1.4.1 ... now .live() function supports fucus and blur events =) Greetings