onfocusout 事件

DOM 事件 FocusEvent

定義和用法

onfocusout 事件發生在元素即將失去焦點時。

提示： onfocusout 事件類似于 onblur 事件。主要區別在于 onblur 事件不會冒泡。因此，如果您想找出元素或其子元素是否失去焦點，則應使用 onfocusout 事件。

提示：雖然 Firefox 不支持 onfocusout 事件，但您可以通過使用 onblur 事件的捕獲偵聽器（使用 addEventListener() 方法的可選 useCapture 參數）來了解元素的子元素是否失去焦點。

提示： onfocusout 事件與 onfocusin 事件相反。

實例

例子 1

當輸入字段即將失去焦點時執行 JavaScript：

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

親自試一試

頁面下方有更多 TIY 實例。

語法

在 HTML 中：

<element onfocusout="myScript">

親自試一試

In JavaScript (may not work as expected in Chrome, Safari and Opera 15+):

object.onfocusout = function(){myScript};

親自試一試

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("focusout", myScript);

親自試一試

注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技術細節

冒泡： 支持
可取消： 不支持
事件類型： FocusEvent
支持的 HTML 標簽： 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>
DOM 版本： Level 2 Events

瀏覽器支持

表中的數字注明了完全支持該事件的首個瀏覽器版本。

事件 Chrome IE Firefox Safari Opera
onfocusout 支持 支持 52.0 支持 支持

注釋：onfocusout 事件在使用 JavaScript HTML DOM 語法的 Chrome、Safari 和 Opera 15+ 中可能無法按預期工作。但是，它應該作為 HTML 屬性并使用 addEventListener() 方法（請參見下面的語法示例）。

更多實例

例子 2

將 "onfocusin" 與 "onfocusout" 事件一起使用：

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

親自試一試

例子 3

事件委托：將 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>

親自試一試

例子 4

事件委托：使用 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>

親自試一試

DOM 事件 FocusEvent