Peristiwa onfocusout

Peristiwa DOM Peristiwa FocusEvent

Definisi dan penggunaan

Peristiwa onfocusout terjadi saat elemen mendekati untuk kehilangan fokus.

Petunjuk: Peristiwa onfocusout mirip dengan Peristiwa onblur.Perbedaan utama adalah peristiwa onblur tidak mengalir. Jadi, jika Anda ingin menemukan apakah elemen atau anaknya kehilangan fokus, gunakan peristiwa onfocusout.

Petunjuk:Walaupun Firefox tidak mendukung peristiwa onfocusout, Anda dapat mengetahui apakah elemen anak kehilangan fokus dengan menggunakan penjilat penangkapan peristiwa onblur (menggunakan parameter opsi useCapture metode addEventListener())

Petunjuk: Peristiwa onfocusout dengan Peristiwa onfocusinSebaliknya.

Instansiasi

Contoh 1

Eksekusi JavaScript saat bidang input mendekati untuk kehilangan fokus:

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

Cuba sendiri

Ada lebih banyak contoh TIY di bawah halaman.

Sintaks

Dalam HTML:

<elemen onfocusout="myScript">

Cuba sendiri

Dalam JavaScript (mungkin tidak berfungsi seperti diharapkan di Chrome, Safari dan Opera 15+):

objek.onfocusout = function(){myScript};

Cuba sendiri

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("focusout", myScript);

Cuba sendiri

注释：Internet Explorer 8 atau versi yang lebih awal tidak mendukung Metode addEventListener().

Detil teknis

Pembubaran: 支持
Dapat dibatalkan: Tidak didukung
Tipe peristiwa: Peristiwa FocusEvent
Tanda tangan HTML yang didukung: Semua elemen HTML kecuali: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> serta <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()">

Cuba sendiri

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

Cuba sendiri

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

Cuba sendiri

Peristiwa DOM Peristiwa FocusEvent