onfocusin 事件

语法

onfocusin 事件的语法非常简单，只需要在需要绑定事件的元素上添加相应的事件监听即可：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>onfocusin 事件示例</title>
</head>
<body>

<input type="text" id="inputField">

<script>
document.getElementById("inputField").onfocusin = function() {
  alert("Input field has focus!");
};
</script>

</body>
</html>

在上面的示例中，当输入框获得焦点时，会弹出一个提示框显示 "Input field has focus!"。

示例

下面我们来看一个更加实际的示例，假设我们有一个表单，其中包含多个输入框，我们希望在任意一个输入框获得焦点时改变其背景颜色：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>onfocusin 事件示例</title>
  <style>
    .focused {
      background-color: lightblue;
    }
  </style>
</head>
<body>

<form>
  <input type="text" class="inputField">
  <input type="text" class="inputField">
  <input type="text" class="inputField">
</form>

<script>
var inputFields = document.getElementsByClassName("inputField");

for (var i = 0; i < inputFields.length; i++) {
  inputFields[i].onfocusin = function() {
    this.classList.add("focused");
  };

  inputFields[i].onfocusout = function() {
    this.classList.remove("focused");
  };
}
</script>

</body>
</html>

在上面的示例中，我们通过遍历所有的输入框元素，给每个输入框绑定了 onfocusin 和 onfocusout 事件，当输入框获得焦点时，会添加一个名为 "focused" 的类，从而改变其背景颜色；当输入框失去焦点时，会移除该类。

通过这样的示例，我们可以看到 onfocusin 事件的一个实际应用场景，帮助我们实现更加动态和交互性的页面效果。