onblur olayı

DOM olayları FocusEvent

Tanım ve Kullanım

onblur olayı nesnenin odak kaybettiği zaman gerçekleşir.

onblur olayı en sık form doğrulama kodları ile birlikte kullanılır (örneğin, kullanıcı form alanını terk ettiğinde).

İpucu: onblur olayı ile onfocus olayıtersine

İpucu: onblur olayı benzerdir onfocusout olayı。Ana fark, onblur olayının冒泡 (bulaştırma) olmamasıdır. Bu yüzden, bir elementin veya alt elementlerinin odak kaybettiğini bulmak istiyorsanız, onfocusout olayını kullanabilirsiniz. Ancak, onblur olayını kullanarak: addEventListener() 方法useCapture parametresi (isteğe bağlı) ile bu işlemi gerçekleştirmek için.

实例

Kullanıcı girdi alanını terk ettiğinde JavaScript çalıştırılır:

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

Kendi kendine deneyin

Sayfa altında daha fazla TIY örneği bulunmaktadır.

grama

HTML'de:

<element onblur="myScript">

Kendi kendine deneyin

JavaScript'te:

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

Kendi kendine deneyin

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

object.addEventListener("blur", myScript);

Kendi kendine deneyin

注释：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
onblur 支持 支持 支持 支持 支持

更多实例

实例

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

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

Kendi kendine deneyin

实例

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

Kendi kendine deneyin

实例

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

Kendi kendine deneyin

DOM olayları FocusEvent