在jQuery .live()方法中模拟“焦点”和“模糊”

更新:从jQuery 1.4开始, $.live()现在支持focusinfocusout事件。


jQuery当前1不支持“blur”或“focus”作为$ .live()方法的参数。 我可以实现什么类型的解决方案来实现以下目标:

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

1 07/29/2009,版本1.3.2

工作方案:

 (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中测试过。 应该完全按照你的意图工作。

更新:拆解现在正在工作。

此function现在包含在jQuery核心中(从1.4.1开始)。

live()是jQuery的事件委托快捷方式。 要回答您的问题,请参阅委派焦点和模糊事件 。

它非常巧妙:对于符合标准的浏览器,他使用事件捕获来捕获这些事件。 对于IE,他使用IE专有的focusin (用于focus )和focusout (用于blur )事件,这些事件确实起泡,允许传统的事件委托。

我将把它移植到jQuery作为练习。

它们已被添加到jquery 1.4.1 …现在.live()函数支持fucus和blur事件=)问候

看起来问题是在检查event.type时返回“focusin”和“focusout”

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

还有一个补充:此解决方案不支持多个参数。

我试过了:

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

等等

它只触发了模糊事件。

不过这个解决方案很有帮助。