Mô phỏng "tập trung" và "mờ" trong phương pháp jQuery .live()

Question

Cập nhật: Tính đến jQuery 1.4, $.live() bây giờ hỗ trợ focusin và focusout sự kiện.

---

jQuery hiện không hỗ trợ "mờ" hay "tập trung" như các đối số cho phương pháp $.live(). loại gì công việc xung quanh tôi có thể thực hiện để đạt được những điều sau đây:

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

^{. 07/29/2009, phiên bản 1.3.2}

Answer 1

giải pháp làm việc:

(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 trong IE/FF/Chrome. Nên làm việc chính xác như bạn dự định.

CẬP NHẬT: Teardowns hiện đang hoạt động.

Answer 2

live() là phím tắt của jQuery tới event delegation. Để trả lời câu hỏi của bạn, hãy xem Delegating the focus and blur events.

Khá khéo léo: đối với các trình duyệt tuân thủ tiêu chuẩn, anh sử dụng event capturing để chặn các sự kiện đó. Đối với IE, ông sử dụng các quyền sở hữu độc quyền của IE focusin (đối với focus) và focusout (đối với blur), hoạt động bong bóng, cho phép ủy quyền sự kiện truyền thống.

Tôi sẽ để việc chuyển nó cho jQuery như một bài tập.

Answer 3

một bổ sung nữa: giải pháp này không hỗ trợ nhiều tham số.

tôi đã cố gắng:

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

, vv

và nó chỉ bắn sự kiện mờ.

tuy nhiên giải pháp này hữu ích.

Answer 4

Chức năng này hiện được bao gồm trong lõi jQuery (như 1.4.1).

Answer 5

họ đã được thêm vào jquery 1.4.1 ... bây giờ .live() chức năng hỗ trợ fucus và làm mờ các sự kiện =) Chúc mừng

Answer 6

Hình như vấn đề là khi kiểm tra event.type nó sẽ trả về "focusin" & "focusout"

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