onfocusin 事件

2018-12-05 17:48 更新

onfocusin 事件

事件對象參考手冊 事件對象

實例

在輸入字段（input）即將獲取焦點時執(zhí)行 JavaScript:

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

嘗試一下 ?

本章節(jié)底部還有更多實例。

定義和用法

onfocusin 事件在一個元素即將獲得焦點時觸發(fā)。

提示： onfocusin 事件類似于onfocus 事件。 主要的區(qū)別是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否獲取焦點，需要使用 onfocusin 事件。

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

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

瀏覽器支持

事件          
onfocusin Yes Yes 不支持 Yes Yes

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

語法

HTML 中:

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

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

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

JavaScript 中, 使用 addEventListener() 方法:

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

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

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

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

Examples

更多實例

實例

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

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

嘗試一下 ?

實例

事件委托：設(shè)置 addEventListener() 的 useCapture 參數(shù)為 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>

嘗試一下 ?

實例

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

嘗試一下 ?

事件對象參考手冊 事件對象

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號