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 事件類(lèi)似于onblur 事件。 主要的區(qū)別是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否獲取焦點(diǎn)，需要使用 onfocusout 事件。

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

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

瀏覽器支持

事件          
onfocusout Yes Yes 不支持 Yes Yes

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

語(yǔ)法

HTML 中:

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

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

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

JavaScript 中, 使用 addEventListener() 方法:

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

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

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

是否支持冒泡:Yes
是否可以取消:No
事件類(lèi)型: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)