Ang onblur event

DOM Event FocusEvent

Paglalarawan at Paggamit

Ang onblur event ay nangyayari kapag ang object ay nawala ang fokus.

Ang onblur event ay pinakamadalas na ginagamit kasama ang code ng form validation (halimbawa, kapag umalis ang user sa field ng form).

Paalam: Ang onblur event ay katulad ng onfocus EventKabaligtaran.

Paalam: Ang onblur event ay katulad ng onfocusout EventAng pangunahing pagkakaiba sa pagitan ng onblur ay ang onblur event ay hindi bubbling. Kaya, kung gusto mong makita kung ang element o ang kanyang mga anak ay nawala ang fokus, magamit ang onfocusout event. Gayunpaman, maari mong gamitin ang onblur event sa paggamit ng onblur event: addEventListener() 方法ang parameter ng useCapture (opsiyonal) upang gawin ito.

实例

Ang JavaScript ay isinasakatuparan kapag ang user ay umalis sa input field:

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

Try It Yourself

Mayroon pang higit pang mga halimbawa ng TIY sa ibaba ng pahina.

Gramata

Sa HTML:

<element onblur="myScript">

Try It Yourself

Sa JavaScript:

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

Try It Yourself

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

object.addEventListener("blur", myScript);

Try It Yourself

注释：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()">

Try It Yourself

实例

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

Try It Yourself

实例

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

Try It Yourself

DOM Event FocusEvent