在jQuery .live（）方法中模擬“焦點”和“模糊”

Question

更新：從jQuery 1.4開始， $.live()現在支持focusin和focusout事件。

---

jQuery當前¹不支持“blur”或“focus”作為$ .live（）方法的參數。 我可以實現什么類型的解決方案來實現以下目標：

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

^{1 。 07/29/2009，版本1.3.2}

Answer 1

工作方案：

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

})();

在IE / FF / Chrome中測試過。 應該完全按照你的意圖工作。

更新：拆解現在正在工作。

Answer 2

此功能現在包含在jQuery核心中（從1.4.1開始）。

Answer 3

看起來問題是在檢查event.type時返回“focusin”和“focusout”

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

Answer 4

live()是jQuery的事件委托快捷方式。 要回答您的問題，請參閱委派焦點和模糊事件 。

它非常巧妙：對於符合標准的瀏覽器，他使用事件捕獲來捕獲這些事件。 對於IE，他使用IE專有的focusin （用於focus ）和focusout （用於blur ）事件，這些事件確實起泡，允許傳統的事件委托。

我將把它移植到jQuery作為練習。

Answer 5

它們已被添加到jquery 1.4.1 ...現在.live（）函數支持fucus和blur事件=）問候

Answer 6

還有一個補充：此解決方案不支持多個參數。

我試過了：

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

等等

它只觸發了模糊事件。

不過這個解決方案很有幫助。