onfocusout 事件
页面下方有更多实例。
定义和用法
onfocusout 事件发生在元素即将失去焦点时。
提示： onfocusout 事件类似于 onblur 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，则应使用 onfocusout 事件。
提示：虽然 Firefox 不支持 onfocusout 事件，但您可以通过使用 onblur 事件的捕获侦听器（使用 addEventListener() 方法的可选 useCapture 参数）来了解元素的子元素是否失去焦点。
提示： onfocusout 事件与 onfocusin 事件相反。
浏览器支持
表中的数字表示支持该事件的第一个浏览器版本。
| 事件 | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
注释： onfocusout 事件在使用 JavaScript HTML DOM 语法的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 HTML 属性并使用 addEventListener() 方法（请参见下面的语法示例）。
语法
In JavaScript (may not work as expected in Chrome, Safari and Opera 15+):
object.onfocusout = function(){myScript};
亲自试一试 »
注释: Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 是否支持冒泡: | Yes |
|---|---|
| 是否支持取消: | No |
| 事件类型: | FocusEvent |
| 支持的 HTML 标签: | 所有 HTML 元素，除了： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM 版本: | Level 2 Events |
更多实例
实例
将 "onfocusin" 与 "onfocusout" 事件一起使用：
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
亲自试一试 »
实例
事件委托：将 addEventListener() 的 useCapture 参数设置为 true（用于 focus 和 blur）：
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
亲自试一试 »
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
实例
事件委托：使用 focusin 事件：
<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>
亲自试一试 »
<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>
