Question

通过上一个问题Textarea highlight on focus的答案，我发现了onfocus和onblur的替代方案。这些是onfocusin和onfocusout。

我的问题是，两者之间的行为方式是否存在差异？

这个小提琴表明两者看起来都是一样的：http://jsfiddle.net/spedwards/pQLAM/

Answer 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

Answer 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（）。

onfocus vs onfocusin＆amp; onblur vs onfocusout

2 个答案: