Focus, Focusin, Focusout：你搞清它们的区别了吗？

Focus, focusin, 和 focusout 事件是 Web 开发中非常重要的三个事件，它们用于处理元素获得或失去焦点时触发的事件。这三个事件之间存在着一些关键的区别，了解这些区别对于正确地使用它们非常重要。

事件类型

• focus ：当元素获得焦点时触发。
• focusin ：当元素或其子元素获得焦点时触发。
• focusout ：当元素或其子元素失去焦点时触发。

冒泡行为

• focusin 和 focusout 事件会冒泡。这意味着当这些事件在一个元素上触发时，它们也会在该元素的父元素上触发，依此类推，直到到达根元素。
• focus 事件不会冒泡。这意味着当 focus 事件在一个元素上触发时，它不会在该元素的父元素上触发。

默认行为

• focus 和 blur 事件的默认行为是将焦点移动到触发事件的元素上。
• focusin 和 focusout 事件没有默认行为。

使用场景

• focus 事件通常用于在元素获得焦点时执行某些操作，例如显示提示信息或激活元素。
• focusin 事件通常用于在元素或其子元素获得焦点时执行某些操作，例如显示工具提示或激活元素。
• focusout 事件通常用于在元素或其子元素失去焦点时执行某些操作，例如隐藏提示信息或停用元素。

实例

以下是一个使用 focus 事件的示例：

<input type="text" id="myInput" onfocus="showHint()">

function showHint() {
  // 在输入框获得焦点时显示提示信息
  document.getElementById("hint").style.display = "block";
}

以下是一个使用 focusin 事件的示例：

<div id="myDiv" onfocusin="showHint()">
  <input type="text" id="myInput">
</div>

function showHint() {
  // 在 div 或其子元素获得焦点时显示提示信息
  document.getElementById("hint").style.display = "block";
}

以下是一个使用 focusout 事件的示例：

<input type="text" id="myInput" onfocusout="hideHint()">

function hideHint() {
  // 在输入框失去焦点时隐藏提示信息
  document.getElementById("hint").style.display = "none";
}

总结

Focus, focusin, 和 focusout 事件是 Web 开发中非常重要的三个事件，它们用于处理元素获得或失去焦点时触发的事件。这三个事件之间存在着一些关键的区别，了解这些区别对于正确地使用它们非常重要。