onfocus vs onfocusin & onblur vs onfocusout

onfocus vs onfocusin & onblur vs onfocusout

本文关键字：vs onblur onfocusout onfocusin onfocus amp      更新时间：2023-09-26

根据我上一个问题的答案，Textarea突出显示焦点，我发现了onfocus和onblur的替代方案。它们是CCD_ 3和CCD_。

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

这把小提琴表明两者看起来是一样的：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); // does not work, focus does not bubble
div.addEventListener('focusin', handler, false); // works when input is focused, as the event bubbles

FIDDLE

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

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

下面的代码是一个例子，其中选择了表单，但事件被删除到作为表单子级的输入元素。如果用"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不支持onfocuout（）。

相关文章：