聚焦与聚焦onblur vs onfocusout [英] onfocus vs onfocusin & onblur vs onfocusout

问题描述

在回答上一个问题重点突出显示文本区域后，我发现了另一种选择到 onfocus 和 onblur .这些是 onfocusin 和 onfocusout .

我的问题是，两者在行为方式上是否有差异?

此小提琴演示了两者的外观相同: http://jsfiddle.net/spedwards/pQLAM/

解决方案

focus 和 blur 事件不会冒泡，因此这些事件无法进行事件委派.

focusin 和 focusout 气泡到父元素，并且可以委托.

否则它们是相同的，但是 focusin 和 focusout 不是任何标准的一部分，但实际上是专有的IE事件，后来被其他一些浏览器采用，但是跨浏览器不支持它们.

示例

 < div id ="test">< input type ="text"/></div> 

使用js

  var div = document.getElementById('test');div.addEventListener('focus'，handler，false);//不起作用，焦点不会冒泡div.addEventListener('focusin'，handler，false);//当输入成为焦点时有效，因为事件冒泡 

FIDDLE

With the answer of my previous question, Textarea highlight on focus, I discovered an alternative to onfocus and onblur. These are onfocusin and onfocusout.

My question is, is there any differences between the two with how they behave?

This fiddle demonstrates that both appear the same: http://jsfiddle.net/spedwards/pQLAM/

解决方案

focus and blur events do not bubble, so event delegation is impossible with those events.

focusin and focusout bubbles to the parent elements, and can be delegated.

Otherwise they are the same, but focusin and focusout is not part of any standard, but are in fact proprietary IE events, later adopted by some other browsers, but they are not supported cross browser.

Example

<div id="test">
    <input type="text" />
</div>

with js

var div = document.getElementById('test');

div.addEventListener('focus', handler, false); // does not work, focus does not bubble

div.addEventListener('focusin', handler, false); // works when input is focused, as the event bubbles

FIDDLE

这篇关于聚焦与聚焦onblur vs onfocusout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！