onfocus vs onfocusin & onblur vs onfocusout答案

【问题标题】：onfocus vs onfocusin & onblur vs onfocusoutonfocus vs onfocusin & onblur vs onfocusout
【发布时间】：2014-04-16 16:00:09
【问题描述】：

根据我上一个问题Textarea highlight on focus 的答案，我发现了onfocus 和onblur 的替代方案。它们是onfocusin 和onfocusout。

我的问题是，两者的行为方式有什么不同吗？

这个小提琴表明两者看起来相同：http://jsfiddle.net/spedwards/pQLAM/

【问题讨论】：

标签： javascript

【解决方案1】：

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); // does not work, focus does not bubble

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

FIDDLE

【讨论】：

【解决方案2】：

onfocus()：当输入字段获得焦点时触发。主要用于输入、选择和标签。

onfocusin()：onfocus事件类似于onfocusin事件。主要区别在于 onfocus 事件不会冒泡。因此，如果你想知道一个元素或其子元素是否获得了 focus()，你可以使用 onfocusin 事件。但是，您可以通过使用 onfocus 事件的 addEventListener() 方法的可选 useCapture 参数来实现此目的。另外，firefox 不支持 onfocusin()。

下面的代码是一个示例，其中选择了表单，但事件被委托给作为表单子级的输入元素。如果替换为“focus()”，则不会发生同样的情况。

<!DOCTYPE html>
<html>
<body>

<p>When you enter the input field (child of FORM), a function is triggered which sets the background color to yellow. When you leave the input field, a function is triggered which removes the background color.</p>

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";  
}
</script>

</body>
</html>

onblur()：当用户离开输入字段或失去焦点时。

onfocusout：onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡，即不会委托给子元素。因此，如果你想知道一个元素或其子元素是否失去焦点，你可以使用 onfocusout 事件。但是，您可以通过使用 onblur 事件的 addEventListener() 方法的可选 useCapture 参数来实现。此外，firefox 不支持 onfocusout()。

【讨论】：