onfocusin 事件

DOM 事件 FocusEvent

定义和用法

onfocusin 事件在元素即将获得焦点时发生。

提示：onfocusin 事件类似于 onfocus 事件。主要区别在于 onfocus 事件不会冒泡。因此，如果你想知道一个元素或其子元素是否获得焦点，你应该使用 onfocusin 事件。

提示：虽然 Firefox 不支持 onfocusin 事件，但您可以通过使用 onfocus 事件的捕获侦听器（使用 addEventListener() 方法的可选 useCapture 参数）来确定元素的子元素是否获得焦点。

提示：onfocusin 事件与 onfocusout 事件相反。

实例

例子 1

当输入字段即将获得焦点时执行 JavaScript：

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

亲自试一试

页面下方有更多 TIY 实例。

语法

在 HTML 中：

<element onfocusin="myScript">

亲自试一试

在 JavaScript 中（在 Chrome、Safari 和 Opera 15+ 中可能无法正常工作）：

object.onfocusin = function(){myScript};

亲自试一试

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

object.addEventListener("focusin", myScript);

亲自试一试

注释：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
onfocusin 支持 支持 52.0 支持 支持

注释：onfocusin 事件在使用 JavaScript HTML DOM 语法的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 HTML 属性并使用 addEventListener() 方法（请参见下面的语法示例）。

更多实例

例子 2

将 "onfocusin" 与 "onfocusout" 事件一起使用：

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

亲自试一试

例子 3

事件委托：将 addEventListener() 的 useCapture 参数设置为 true（用于 focus 和 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>

亲自试一试

例子 4

事件委托：使用 focusin 事件：

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

亲自试一试

DOM 事件 FocusEvent