onfocusout 事件
以下还有更多“自己尝试”示例。
描述
当元素失去焦点时，将发生 onfocusout 事件。
onfocusout 事件通常用于输入字段。
onfocosout 事件通常与表单验证一起使用（当用户离开表单字段时）。
语法
技术细节
| 冒泡 | 是 |
|---|---|
| 可取消 | 否 |
| 事件类型 | FocusEvent |
| HTML 标签 | 所有 HTML 元素，除了：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title> |
| DOM 版本 | Level 2 事件 |
浏览器支持
onfocusout 是 DOM Level 2 (2001) 功能。
它在所有浏览器中都得到完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
更多示例
示例
事件委派：使用 focus 和 blur 事件
将 addEventListener() 的 useCapture 参数设置为 true
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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 和 focusout 事件
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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>
自己尝试 »
