コース推薦：
onfocusout イベント
定義と用法
Firefoxでは onfocusout イベントがサポートされていませんが、addEventListener() メソッドのオプションの useCapture パラメータを使用して onblur イベントのキャプチャリスナーを通じて、要素の子要素が焦点を失ったかどうかを確認することができます。 onfocusout イベントは、要素が焦点を失う直前に発生します。 onblur イベントonfocusout イベントは、
Firefoxでは onfocusout イベントがサポートされていませんが、addEventListener() メソッドのオプションの useCapture パラメータを使用して onblur イベントのキャプチャリスナーを通じて、要素の子要素が焦点を失ったかどうかを確認することができます。主な違いは、onblur イベントがバブルしないことです。したがって、要素やその子要素が焦点を失ったかどうかを確認したい場合は、onfocusout イベントを使用する必要があります。
Firefoxでは onfocusout イベントがサポートされていませんが、addEventListener() メソッドのオプションの useCapture パラメータを使用して onblur イベントのキャプチャリスナーを通じて、要素の子要素が焦点を失ったかどうかを確認することができます。 ヒント： onfocusin イベントonfocusout イベントは、
逆です。
インスタンス
例 1
入力フィールドが焦点を失う直前に JavaScriptを実行します：
<input type="text" onfocusout="myFunction()">
ページの下部には、TIY 実例が多数あります。
文法：
HTML では：< element.addEventListener("focusout",onfocusout="
">
JavaScript では、addEventListener() メソッドを使用して：In JavaScript (Chrome、Safari、Opera 15+ では期待されない動作になる可能性があります)：.addEventListener("focusout",.onfocusout = function(){
};
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 バージョン： | レベル 2 イベント |
ブラウザサポート
テーブルの数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。
| イベント | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | サポート | サポート | 52.0 | サポート | サポート |
注：onfocusout イベントは、Chrome、Safari、Opera 15+のJavaScript HTML DOM文法では期待通りに動作しない可能性があります。しかし、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>
