onfocusout 事件 - JavaScript 参考手册 - 简单教程，简单编程

HTML DOM 的 onfocusout 事件在元素即将失去焦点时触发

语法

HTML

<element onfocusout="myScript">

运行范例

JavaScript ( Chrome, Safari 和 Opera 15+ 可能无法正常工作 )

object.onfocusout=function(){ /*myScript*/ };

运行范例

JavaScript 使用 addEventListener() 方法

object.addEventListener("focusout", /*myScript*/ );

运行范例

Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法

浏览器支持


Yes	Yes	不支持	Yes	Yes

在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusout 事件可能无法正常工作，推荐 addEventListener()

说明

onfocusout 事件类似于 onblur 事件，主要的区别是 onblur 事件不支持冒泡

因此，如果需要查看元素或其子元素是否获取焦点，请使用 onfocusout 事件

虽然 Firefox 不支持 onfocusout 事件，但可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture ）的捕获监听事件来查看元素或其子元素是否失去焦点

object.addEventListener("focus", myFocusFunction,  true );

onfocusout 事件的相反事件为 onfocusin 事件

其它

是否支持冒泡	Yes
是否可以取消	No
事件类型	FocusEvent
支持的 HTML 标签	所有 HTML 元素，除了 : <base>, <bdo>, <br/>, <head>, <html> , <br/> , <iframe> , <meta>, <param>, <script>, <style>, <title>

范例

在 input 输入框即将失去焦点时执行 JavaScript

<input type="text" onfocusout="myFunction()">

运行范例 »

范例

使用 "onfocusin" 和 "onfocusout" 事件

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

运行范例 »

范例

事件委托：设置 addEventListener() 的 useCapture 参数为 true (用于获取焦点和失去焦点)

<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>

运行范例 »

范例

事件委托：使用 focusout 事件 ( Firefox 浏览器不支持 )

<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>

运行范例 »