更多"Try it Yourself"下面的例子。
定義和用法
當一個元素即將獲得焦點時發生onfocusin事件。
提示：onfocusin事件是類似的onfocus事件。 的主要區別在於，onfocus事件不起泡。 因此，如果你想找出一個元素或者其子是否獲得焦點時，你應該使用onfocusin事件。
提示：儘管Firefox不支持onfocusin事件，你可以找到一個元素的孩子是否獲得焦點與否，使用捕獲偵聽器的onfocus事件（使用的可選將useCapture參數addEventListener()方法）。
Tip:該onfocusin事件是相反onfocusout在事件。
瀏覽器支持
| 事件 | |||||
|---|---|---|---|---|---|
| onfocusin | 是 | 是 | 不支持 | 是 | 是 |
注意：如預期在Chrome，Safari和Opera 15+使用JavaScript的HTML DOM語法onfocusin事件可能無法正常工作。 然而，它應該工作作為HTML屬性，並通過使用addEventListener()方法。
句法
在HTML：
< 試一試» 在JavaScript (may not work as expected in Chrome, Safari and Opera 15+) ：
object .onfocusin=function(){ 試一試» 注意： addEventListener()在Internet Explorer 8和更早版本不支持的方法。
技術細節
| 泡沫： | 是 |
|---|---|
| 取消： | 沒有 |
| 事件類型： | FocusEvent |
| 支持的HTML標籤： | 所有的HTML元素，除了：<基數>，<BDO>，點擊<HEAD>，<HTML>，<IFRAME>，<META>，<param>的<SCRIPT>，<STYLE>和<title> |
| DOM版本： | 2級事件 |
更多示例
例
使用"onfocusin"連同"onfocusout"事件：
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
試一試» 例
事件代表團：設置的參數將useCapture addEventListener()為true (for focus and blur) ：
<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>
試一試» <事件對象