`
zhouyrt
  • 浏览: 1141643 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

各浏览器对focusin/focusout事件的支持差异

 
阅读更多

浏览器版本:

IE6/7/8/9

IE10 preview2

Firefox 5

Safari 5

Chrome 12

Opera 11


测试:

IE6/7/8 IE9/10 Firefox5 Safari5 Chrome12 Opera11
el.onfocusin Y Y N N N Y
el.attachEvent('onfocusin',fn) Y Y N N N Y
el.addEventListener('focusin',fn,false); N Y N Y Y Y


结论:
1, 所有 IE 版本均支持focusin/focusout事件(注意:IE6/7/8中不支持el.addEventListener方法)。
2, Opera 最强悍即支持attachEvent,又支持addEventListener。且这两种方式添加事件均支持focusin/focusout事件。
3, Safari/Chrome  给人一个惊喜,虽然el.onfocusin方式不支持,但 addEventListener方式却支持。因此想让Safari/Chrome中支持focusin事件,只能使用addEventListener方式添加事件。
4, Firefox 任何一种添加事件方式都不支持 focusin/focusout。


与focus/blur的区别
focusin/focusout 支持事件冒泡,因此可为其实现事件代理。


相关:
http://msdn.microsoft.com/en-us/library/ms536935%28VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/ms536936%28VS.85%29.aspx

 

0
0
分享到:
评论

相关推荐

    ios12中遇到的带input弹窗的错位问题的解决方法

    解决方法一:使用 focusin 和 focusout 事件 可以使用 document.body.addEventListener('focusin', ...) 和 document.body.addEventListener('focusout', ...) 事件来监听软键盘的弹出和收起。具体代码如下: ``` ...

    on-screen-keyboard-detector

    Chrome的行为使得还必须观察focusin , focusout , resize和visibilitychange focusout事件。 局限性 订阅检测器时,在Android版Chrome上,键盘必须首先处于隐藏状态。 在Android版Chrome浏览器上, hidden事件和...

    JavaScript事件机制

    - **focusin** / **focusout**:与`blur`/`focus`类似,但支持事件冒泡。 - **click** / **dbclick** / **mousedown** / **mouseup** / **mousemove**:鼠标相关的事件。 - **mouseleave** / **mouseenter** / **...

    JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法。分享给大家供大家参考。具体分析如下: ...这类类型可以包括如下:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown,

    JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有: blur:元素失去焦点,不会冒泡; DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin; DOMFocusOut:同HTML...

    EventFilter

    在`EventFilter`中,你可以对多种事件进行处理,包括但不限于`QEvent::KeyPress`(键盘事件)、`QEvent::MouseButtonPress`(鼠标点击事件)、`QEvent::FocusIn`(获取焦点事件)和`QEvent::FocusOut`(失去焦点事件...

    javascript委托(Delegate)blur和focus用法实例分析

    由于历史原因,不同浏览器对事件的支持有所不同,尤其是旧版浏览器如IE和Opera。因此,开发者在编写事件委托代码时需要考虑这些兼容性问题。 实例分析: - Opera (9.5b)浏览器中,所有的focus和blur事件可能无法...

    JQuery的ON()方法支持的所有事件罗列

    下面就把on里面支持的事件列出来,共享给大家: 代码如下: blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseent

    jquery常用方法及使用示例汇总

    mouseover()/mouserout() 当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。 mouseover事件大多数时候会与 mouseout 事件一起...focusin()和focusout() .focusin():一个元素或它的子元素得到焦

    track-focus:跟踪焦点事件,以获得更好的辅助功能样式

    focusout主体是否有focusout事件,并删除鼠标/键盘类。 根据需要设置焦点状态的样式。 用法 包括trackFocus.min.js(仅500个字节)。 样式焦点状态。 兼容性 在所有现代浏览器中均按原样工作。 对于较旧的浏览器...

    详解jQuery事件

    在IE8等旧版本浏览器中,某些事件如 `submit` 不支持在捕获阶段触发,因此使用事件冒泡更为重要。事件委托在处理大量动态元素或需要优化性能的应用中尤其有用。 总结,jQuery事件是增强用户交互的关键工具,`.on()`...

    jquery live()重复绑定的解决方法介绍

    例如,在jQuery 1.4.1版本中,live()方法还支持focus和blur事件(这些事件被映射到更合适的、可以冒泡的focusin和focusout事件)。此外,在该版本中还能支持hover事件(映射到"mouseenter"和"mouseleave"事件)。在...

    js事件on动态绑定数据,绑定多个事件的方法

    值得注意的是,不是所有的事件都能冒泡,如`focus`和`blur`,但它们有对应的冒泡版本,如`focusin`和`focusout`。同时,可以通过`event.stopPropagation()`阻止事件冒泡。 `on()`方法还可以用来绑定多个事件。例如...

    JQuery中的常用事件、对象属性与使用方法分析

    9. `.focus()/.blur()`: 类似于`.focusin()`和`.focusout()`,但不支持事件冒泡。 10. `.change()`: 表单元素(如输入框、选择框等)的值改变时触发。 11. `.select()`: 文本元素被选中时触发。 12. `.submit()`:...

    Highlight Active Row-crx插件

    工作原理:该扩展程序注入了一个小的脚本,该脚本向根文档对象添加了“ focusin” /“ focusout”事件侦听器。 当'focusin'事件触发时,它从event.target开始并遍历DOM以寻找 父元素。 如果 发现它将内联样式设置为...

Global site tag (gtag.js) - Google Analytics