如何在事件代理中正确使用 focus 和 blur 事件
作者:怿飞 来源:怿飞博客 发布时间:2010-01-30 12:51:00
什么是事件代理(Event Delegation)?
如果不太了解的朋友,可详细阅读:《Event delegation in JavaScript》,这里不再累述。
首先让我们一起来回顾一些常识:
通常支持事件冒泡(Event Bubbling)的事件类型为鼠标事件和键盘事件,例如:mouseover, mouseout, click, keydown, keypress。
接口事件则通常不支持事件冒泡(Event Bubbling),例如:load, change, submit, focus, blur。
很明显:focus 和 blur 都属于不支持冒泡的接口事件。既然都不支持冒泡,那又如何实现事件代理呢?
可以换个角度,逆向思维,尝试事件捕获(Event Capturing,除了IE,现在流行的标准浏览器均支持)。
测试后会发现,如果你捕获 focus 或 blur 事件,目标元素的祖先元素均执行事件函数。至于为什么?或许是实现的一个 BUG。
el.addEventListener('focus', focusHandler, true);
el.addEventListener('blur', blurHandler, true);
那对于 IE ,我们如何实现呢?
非常幸运,IE 下支持 focusin 和 focusout 事件,非常类似于 focus 和 blur 事件,唯一不同的是,这两种事件支持事件冒泡(Event Bubbling)。
el.onfocusin = focusHandler;
el.onfocusout = blurHandler;
很完美的解决方案:
if (document.addEventListener) {
el.addEventListener('focus', focusHandler, true);
el.addEventListener('blur', blurHandler, true);
} else {
el.onfocusin = focusHandler;
el.onfocusout = blurHandler;
}
当你下次看到 YUI 2.8 的 event/event-debug.js 源码中下面几段代码时,一定会很清晰很多:
576 // String constants used by the addFocusListener and removeFocusListener methods
577
578 FOCUSIN = "focusin",
579 FOCUSOUT = "focusout";
....
750 _specialTypes: {
751 focusin: (isIE ? "focusin" : "focus"),
752 focusout: (isIE ? "focusout" : "blur")
753 },
....
1053 addListener: function (el, sType, fn, obj, overrideContext) {
1054
1055 var capture = ((sType == FOCUSIN || sType == FOCUSOUT) && !YAHOO.env.ua.ie) ? true : false;
1056
1057 return this._addListener(el, this._getType(sType), fn, obj, overrideContext, capture);
1058
1059 },
猜你喜欢
- 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接。下面简单
- MySQL低调宣布它将不再把MySQL企业版服务器作为一个tar包发布,而这距离这个公司宣布将MySQL分为免费版和付费版的时间还不到一年。
- 最常见的XML数据类型有:Element, Attribute,Comment, Text. &nbs
- 在修改后的 《闲谈 Web 图片服务器》 一文中也提及了"IE 浏览器的连接数问题",这也是个有趣的话题。值得补充记录一
- 我想从文件读数据的话,要比直接从数据库快一些吧(个人观点),昨天测试了读出6000条新闻,读数据库用了23579毫秒,读文件只用了123毫秒
- 在数据库查询的时候,我们有时有这样的需求,就是要找出数据表里指定范围行内的数据记录,比如说要找出数据表里第10行到第20行的这10条数据,那
- <script language="vbscript" runat="s
- 设法让用户happy吧~只要你的设计让用户乐了,产品的个性就得到了一次彰显,而用户对网站的情感就会获得一次升华,看看下面的知名网站的人性化设
- 我们的每期话题,团队在内部都会通过邮件进行一番讨论,随着讨论的激烈,往往能碰撞出很多有意义的观点,因此,将讨论内容分享出来,有兴趣的朋友可以
- 注:文中未表明的地方output 输出都是基于IE6.0,其中表明FF的地方为Mozilla Firefox2.0,还要注意文中的大小写ja
- 阅读上一章:Chapter 14 图片替换Chapter 15 为<body>指定样式把内容与显示效果分开设定的好处之一就是灵活
- 无论是在小得可怜的免费数据库空间或是大型电子商务网站,合理的设计表结构、充分利用空间是十分必要的。这就要求我们对数据库系统的常用MySQL数
- 学习复杂代码的最好方法是简化:(function(win, undefined) { var jQuery = f
- 代码如下: <% Dim oConn, ors, aRows Dim i,j Set oConn=Server.CreateObjec
- 有的时候取出全部数据库记录也许正好满足你的要求,不过,在大多数情况下我们通常只需得到部分记录。这样一来该如何设计查询呢?当然会更费点脑筋了,
- select 终极美化,主要是针对下拉框的美化一个很古老的话题了,不过貌似目前为止也没有比较好的做到,在jxdawei的基础上做了
- 阅读上一篇:javascript面向对象编程(二) [Interface,Class.implement 接口及实现]接口规定了一些方法,如
- 无聊的人在无聊的时间做无聊的事打发自己,结果在无聊的事情中发现了IE对内联文字解释的一些疑惑。以下问题在FF2中没发现,而我也只
- javascript实现翻页效果:<html> <head> <title>上下翻页看 - aspxho
- 【eval()函数】JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数,这个函数可以把一个字符串当作一个Java