首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

焦点相关事件兼容性有关问题

2012-11-05 
焦点相关事件兼容性问题概念:除了常见的 focus,blur 事件,DOM Level 3 事件模块还定义了 focusin ,focusou

焦点相关事件兼容性问题

概念:


除了常见的 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 的焦点可见这里。


具体 demo @ google code


firefox 3.6.12


没有 focusin,focusout,DOMFocusIn,DOMFocusOut事件,focus,blur为同步触发


触发顺序为:

?

a1 focus target:a1a1 focus relatedTarget:keydown : 49a1 blur target:a1a1 blur relatedTarget:a2 focus target:a2a2 focus relatedTarget:keydown : 50
?

chrome 9.0


全部事件都实现了,且都为同步触发,但是触发顺序和规范不一致,并且没有定义 relatedTarget 事件属性:

?

a1 focus target:a1a1 focus relatedTarget:a1 focusin target:a1a1 focusin relatedTarget:a1 DOMFocusIn target:a1a1 DOMFocusIn relatedTarget:keydown : 49a1 blur target:a1a1 blur relatedTarget:a1 focusout target:a1a1 focusout relatedTarget:a1 DOMFocusOut target:a1a1 DOMFocusOut relatedTarget:a2 focus target:a2a2 focus relatedTarget:a2 focusin target:a2a2 focusin relatedTarget:a2 DOMFocusIn target:a2a2 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 clickafter clickbody focusinbody focus


?而不是

?

before clickbody focusinafter clickbody 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>
?

?

热点排行