在jQuery .live()方法中模拟“焦点”和“模糊”
更新:从jQuery 1.4开始, $.live()
现在支持focusin和focusout事件。
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") {
等等
它只触发了模糊事件。
不过这个解决方案很有帮助。