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}

$('textarea').bind('focus') works... In your code sample don't you mean "live()"?? — James, Jul 29 '09 at 11:33

James · Accepted Answer · 2009-07-29T12:04:03.537

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.

Now go to the jQuery bug tracker and provide the patch. Good job. — Ionuț G. Stan, Jul 29 '09 at 11:50
Yep, I think so... jQuery takes care of most of it in the background (including the "handling"). Just updated the teardowns so the appropriate events are detached. — James, Jul 29 '09 at 12:06
NOTE: this is no longer necessary. jQuery 1.4 supports this natively, via the `focusin` and `focusout` events. — James, Jan 15 '10 at 20:01
Just a suggestion: in the above code sample, `+new Date()` can be shortened to `+new Date`. The brackets aren’t required (unless you need to pass arguments, of course). — Mathias Bynens, Apr 16 '10 at 11:52

score 5 · Answer 2 · answered Jan 27 '10 at 04:33

5

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

answered Jan 27 '10 at 04:33

Ville

4,088
2
37
38

score 2 · Answer 3 · answered Jul 31 '12 at 01:25

Looks like the problem is when checking the event.type it returns "focusin" & "focusout"

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

score 2 · Answer 4 · answered Jul 29 '09 at 11:39

2

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.

answered Jul 29 '09 at 11:39

Crescent Fresh

115,249
25
154
140

1

Did the port :) (see my answer) – James Jul 29 '09 at 11:44

score 2 · Answer 5 · answered Jun 03 '10 at 03:39

2

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

answered Jun 03 '10 at 03:39

Matias

21
1

score 0 · Answer 6 · edited Nov 09 '11 at 17:59

0

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.

edited Nov 09 '11 at 17:59

Jason Plank

2,336
5
31
40

answered Oct 16 '09 at 14:23

Maarten

1

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

6 Answers6

Linked