peristiwa onblur

Peristiwa DOM Peristiwa FocusEvent

Definisi dan penggunaan

peristiwa onblur terjadi saat objek kehilangan fokus.

Peristiwa onblur paling sering digunakan bersamaan dengan kode verifikasi formulir (contohnya, saat pengguna meninggalkan medan formulir).

Petikan: peristiwa onblur mirip dengan Peristiwa onfocusSebaliknya.

Petikan: peristiwa onblur mirip dengan Peristiwa onfocusout。Perbezaan utama adalah peristiwa onblur tidak akan mengalir ke atas. Jadi, jika Anda ingin mencari apakah elemen atau anak elemennya kehilangan fokus, Anda dapat menggunakan peristiwa onfocusout. Tetapi, Anda dapat menggunakan peristiwa onblur untuk addEventListener() 方法parameter useCapture (pilihan) untuk mencapai ini.

实例

Melaksanakan JavaScript saat pengguna meninggalkan medan input:

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

Cuba sendiri

Ada lagi contoh TIY di bawah halaman.

Sintaks

Dalam HTML:

<element onblur="myScript">

Cuba sendiri

Dalam JavaScript:

object.onblur = function(){}myScript};

Cuba sendiri

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

object.addEventListener("blur", myScript);

Cuba sendiri

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

技术细节

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

浏览器支持

事件 Chrome IE Firefox Safari Opera
onblur 支持 支持 支持 支持 支持

更多实例

实例

将 "onblur" 与 "onfocus" 事件一起使用：

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Cuba sendiri

实例

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

Cuba sendiri

实例

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

Cuba sendiri

Peristiwa DOM Peristiwa FocusEvent