onfocusout 事件

2018-12-05 17:49 更新

onfocusout 事件

事件對(duì)象參考手冊(cè) 事件對(duì)象

實(shí)例

在 input 輸入框即將失去焦點(diǎn)時(shí)執(zhí)行 JavaScript :

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

嘗試一下 ?

本章節(jié)底部包含更多實(shí)例。

定義和用法

onfocusout 事件在元素即將失去焦點(diǎn)時(shí)觸發(fā)。

提示： onfocusout 事件類似于onblur 事件。 主要的區(qū)別是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否獲取焦點(diǎn)，需要使用 onfocusout 事件。

提示： 雖然 Firefox 不支持 onfocusout 事件，但你可以通過使用 onfocus （使用addEventListener()方法的可選參數(shù) useCapture）的捕獲監(jiān)聽事件來查看元素或其子元素是否失去焦點(diǎn)。

提示： onfocusout 事件的相反事件為onfocusin 事件。

瀏覽器支持

事件          
onfocusout Yes Yes 不支持 Yes Yes

注意： 在 Chrome, Safari 和 Opera 15+ 瀏覽器中使用 HTML DOM 語法的 onfocusin 事件可能無法正常工作。但是，他作為一個(gè) HTML 元素，通過使用 addEventListener() 方法可以正常工作。

語法

HTML 中:

<element onfocusout="myScript">嘗試一下

JavaScript (Chrome, Safari 和 Opera 15+ 可能無法正常工作) 中:

object.onfocusout=function(){myScript};嘗試一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("focusout", myScript);嘗試一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技術(shù)細(xì)節(jié)

是否支持冒泡:Yes
是否可以取消:No
事件類型:FocusEvent
支持的 HTML 標(biāo)簽:所有 HTML 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>

實(shí)例

更多實(shí)例

實(shí)例

使用 "onfocusin" 和 "onfocusout" 事件:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

嘗試一下 ?

實(shí)例

事件委托：設(shè)置 addEventListener() 的 useCapture 參數(shù)為 true (用于獲取焦點(diǎn)和失去焦點(diǎn)):

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

嘗試一下 ?

實(shí)例

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

嘗試一下 ?

事件對(duì)象參考手冊(cè) 事件對(duì)象

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)