- 浏览: 1431251 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
概念:
除了常见的 focus,blur 事件,DOM Level 3 事件模块 还定义了 focusin ,focusout 以及 DOMFocusIn ,DOMFocusOut 四个事件。
规范:
blur :
在这个事件触发前,元素已经失去焦点,不冒泡,同步触发。target 指向当前失去焦点的元素。
DOMFocusIn :
在这个事件触发前,元素已经得到焦点,可冒泡,同步触发。target 指向当前得到焦点的元素。
DOMFocusOut :
在这个事件触发前,元素已经没有焦点,可冒泡,同步触发。target 指向当前失去焦点的元素。
focus:
在这个事件触发前,元素已经得到焦点,不冒泡,同步触发。target 指向当前得到焦点的元素。
focusin :
在当前元素获得焦点前以及相关元素失去焦点前触发,可冒泡,同步触发。target 指向当前将要获得焦点的元素,relatedTarget 指向失去焦点的元素
focusout :
在当前失去焦点前触发,可冒泡,同步触发。target 指向当前将要失去焦点的元素,relatedTarget 指向将要失去焦点的元素。
触发顺序:
假定有两个元素 1,2,先使得1 获得焦点再使得 2 获得焦点,那么事件的触发顺序以及触发源为
focusin -> 元素 1
元素 1 获得焦点
focus -> 元素 1
DOMFocusIn -> 元素 1
focusout -> 元素 1
focusin -> 元素 2
元素 1 失去焦点
blur -> 元素 1
DOMFocusOut ->元素 1
元素 2 获得焦点
focus -> 元素 2
DOMFocusIn -> 元素 2
兼容性测试:
测试代码:
<div tabindex="-1" id='a1'> area 1 </div> <div tabindex="-1" id='a2'> area 2 </div>
通过调用 focus()方法来进行焦点转移,(也可通过鼠标直接点击,但是就不能测试是否同步了)关于 div 的焦点可见这里
。
firefox 3.6.12
没有 focusin,focusout,DOMFocusIn,DOMFocusOut事件,focus,blur为同步触发
触发顺序为:
a1 focus target:a1 a1 focus relatedTarget: keydown : 49 a1 blur target:a1 a1 blur relatedTarget: a2 focus target:a2 a2 focus relatedTarget: keydown : 50
chrome 9.0
全部事件都实现了,且都为同步触发,但是触发顺序和规范不一致,并且没有定义 relatedTarget 事件属性:
a1 focus target:a1 a1 focus relatedTarget: a1 focusin target:a1 a1 focusin relatedTarget: a1 DOMFocusIn target:a1 a1 DOMFocusIn relatedTarget: keydown : 49 a1 blur target:a1 a1 blur relatedTarget: a1 focusout target:a1 a1 focusout relatedTarget: a1 DOMFocusOut target:a1 a1 DOMFocusOut relatedTarget: a2 focus target:a2 a2 focus relatedTarget: a2 focusin target:a2 a2 focusin relatedTarget: a2 DOMFocusIn target:a2 a2 DOMFocusIn relatedTarget: keydown : 50
只是将 focusxx DOMFocusXx 作为对应 focus,blur 的后面事件触发,没有使用意义。
ie
ie 支持 focusin ,focusout,并且同步触发顺序和规范一致,但是没有 target 以及 relatedTarget 事件属性。
对于 focus 以及 blur 为异步触发,同样没有 target 以及 relatedTarget 事件属性。
不支持 DOMFocusIn,DOMFocusOut。
触发顺序:
a1 focusin target:null a1 focusin relatedTarget: keydown : 49 a1 focus target:null a1 focus relatedTarget: a1 focusout target:null a1 focusout relatedTarget: a2 focusin target:null a2 focusin relatedTarget: keydown : 50 a1 blur target:null a1 blur relatedTarget: a2 focus target:null a2 focus relatedTarget:
updated : 2010-12-10
一点奇怪的问题:在 ie9 pp7 下,当点击按钮,聚焦页面iframe的body时,iframe body 的 focusin 事件也是异步的!
例如会出现序列
before click after click body focusin body focus
而不是
before click body focusin after click body focus
模拟 focusin/out
这次反过来了,在 focus 或 blur 前有事件触发并且支持子元素冒泡确实非常有用,可是目前 firefox 与 chrome 都不支持或者 触发 顺序不对,另一方面由于标准浏览器支持捕获capture,而捕获阶段恰恰在冒泡阶段前,虽然 focus/blur 不会冒泡,但是捕获阶段还是存在的,那么
handler1
element.addEventListener("focus",function(){ // handler 1 },true);
也就比 handler2
element.addEventListener("focus",function(){ // handler 2 },false);
先触发了,也就相当于 ie 下的
element.attachEvent("onfocusin",function(){ //handler1 });
并且由于捕获时子元素获得焦点也会通知父元素,那么也就达到了 ie 以及规范规定的冒泡效果,这也正是 kissy 事件模块
用来全平台兼容 focusin/out 的方法了。
应用:
通过监控 form 即可监控各个输入域,当失去焦点以及得到焦点时进行处理:
<form id='f'> <input id='i'/> <input id='i2'/> </form> <script> KISSY.use("node",function(S,Node){ Node.one("#f").on("focusin",function(ev){ console.log("focusin : "+ev.target.attr("id")); }); Node.one("#f").on("focusout",function(ev){ console.log("focusout : "+ev.target.attr("id")); }); }); </script>
发表评论
-
continuation, cps
2013-09-12 16:49 2707起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3337一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14005cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5273目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4916最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6322css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7271promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2761closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2839首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6367兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3156背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2882如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2778简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2782场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2193分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6923作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2668html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2405这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2225深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3184场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
html 5 有个很棒的属性,placeholder,在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现: 但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现...
宽度自适应的jQuery焦点图特效,图片的边缘与幻灯片区域的背景相融合,在这个思路上模拟实现了不同网页宽度的自适应问题。在使用本款焦点图特效要注意,...本效果由jquery、CSS和Javascript共同结合实现,兼容性良好。
jquery插件实现图片渐变切换,焦点图代码,使用了jquery和mbMaskedGallery.js插件的共同结合,貌似在火狐和chrome下兼容性有问题,在IE下加载有点慢,可拿去学习研究吧。
自己写的 供参考 用jquery 实现 兼容性ie6+ 其余标准浏览器也没有问题
不过看了很多,却发现对于项目开发来说,很多的焦点图片却不是那么容易使用的:有的需要为之定义一个文本文件,有的兼容性存在问题,有的是基于jQuery实现的插件需加载过多的脚本,有的不能自适应图片的尺寸,有的会...
3.修复了与Opera浏览器的一个兼容性问题; 4.修复了在纯五笔模式下编码错误上屏的问题。 我们将根据网友的意见,尽快改进,推出更完善的新版本1.2版,敬请期待! 最后,感谢大家的使用!欢迎到论坛向我们反馈您宝贵...
从实验过一些机型上看,发现主要存在以下问题: 在 Android 和 IOS 上,获知软键盘弹起和收起状态存在差异,且页面 webview 表现不同。 在IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面...
7. 修复了一些由网络层引起的兼容性问题。 8. 修复了一些网站的Favicon不显示或显示为黑底的问题。 9. 修复了Discuz X2论坛无法上传头像的问题。 10. 修复了XP系统中某些网站的认证对话框保存用户名密码异常的问题。...
[修正]onchange事件被触发2次的问题[beta4] [修正]startDate不能初始化时间的问题[beta4] [修正]两个日期框焦点混淆的问题 [修正]IE中有时会一直显示正在加载的问题 [修正]onchange不能触发的问题 [修正]输入日期后...
//document.writeln ('<dd>06月21日 修复IE6下兼容问题</dd>'); //document.writeln ('<dd>06月01日 懒人图库2012新版上线</dd>'); //document.writeln ('<dd>05月26日 新增北方网通服务器</dd>'); //document....
一个由JS打造消费类电子网站图片轮播图特效 支持进度条显示,来自某品牌电脑公司的网站,整理了一下代码,修复了兼容性问题,这个表现完美,我已经用在了网站上,希望大家也喜欢这个超大气、个性的js焦点图特效。...
随着各大移动终端生产商大力开发...加上与Win7操作系统的兼容性问题,使得多数Android初级开发者望而却步。基于Win7系统Android开发平 台搭建的经验,给出详细的搭建步骤,引导广大Android初级开发者踏入Android开发之
系统集成的复杂程度越高,就势必会涉及多种厂家间产品的兼容性问题。摄像机与镜头、补光灯,甚至后端的传输、处理、存储端的配合都会影响其整体集成系统的的稳定性及整体性能。目前,导致系统的MTBF(平均无故障时间...
12、优化启动文件处理逻辑,解决与其他同类软件兼容性问题 13、优化卸载时文件处理逻辑,卸载后不影响其他同类软件的使用 14、修改默认备份路径为最后分区的畸形目录 15、修改从 ISO 文件搜索 Ghost 映像文件的逻辑...
5、修改了图片取色的方案,使取色操作更加简单易行,避免了因为图片过大而引起的操作失误和反应较慢的缺点,更全面的考虑了图片大小的兼容性问题,避免了小图放大后的失真。 6、增加了屏幕取色的功能,并且可以多次...
lion亲测可用!...- 改进兼容性与AS/400和个人FTP服务器专业版 - 消除了可能出现的延误时,单击某个项目时,浏览器没有焦点 - 过滤列表视图中的文件浏览器更新的项目数 - 修复杂项可能的崩溃和问题
● 取消了需mb扩展支持部分函数,兼容性更好。 ● 新增自定义导航功能。 ● 修正了后台图片预览方式,兼容所有主流浏览器。 ● 重构后台权限分配方式。 ● 修正部分浏览器下无法实现简繁互换的问题。
- 全平台兼容性:Win Linux Mac (Apache、Nginx、IIS) #### 2.使用场景: - 取代FTP,服务端、客户端软件等复杂的安装配置。kod可以一键安装随处使用. - 你可以用它来管理你的服务器(备份,在线解压缩,版本发布......
搜狗拼音输入法(简称搜狗输入法、搜狗拼音)是搜狐公司推出的一款汉字拼音输入法软件,是目前国内主流的拼音输入法之一。号称是当前网上最流行、用户好评率最高、功能最强大的拼音输入法。...5.解决一批兼容性问题。
引言 (Introduction & Overview) 网络安全体系与安全管理全文共72页,当前为第1页。 安全是一条链 薄弱环节导致链断 安全是一种服务 解决安全问题 安全是一个系统 完整性与关联性 ... 连接问题 配置问题 兼容性,参数