focusinfocusout 和 focusblur 之间的区别，举例

focusin/focusout 和 focus/blur 的区别

在前端开发中，我们经常会遇到处理元素获得焦点和失去焦点的情况。其中，有两对事件非常相似，但却有着细微的差别，它们分别是 focusin/focusout 和 focus/blur。虽然它们都与焦点相关，但在具体的应用场景和触发时机上存在差异。本文将详细介绍这两对事件的区别，并通过案例代码来加深理解。

focus/blur：元素获得/失去焦点的基本事件

focus/blur 是最基本的元素获得/失去焦点的事件。当一个元素获得焦点时，触发 focus 事件；当一个元素失去焦点时，触发 blur 事件。这两个事件可以直接应用在元素上，而无需考虑它们的子元素或父元素。

下面是一个简单的示例代码，演示了 focus/blur 事件的基本用法：

html
<input type="text" id="myInput">
<script>
  const myInput = document.getElementById('myInput');
  myInput.addEventListener('focus', function() {
    console.log('Input获得焦点');
  });
  myInput.addEventListener('blur', function() {
    console.log('Input失去焦点');
  });
</script>

在上述代码中，当文本输入框获得焦点时，会在控制台输出"Input获得焦点"；当文本输入框失去焦点时，会输出"Input失去焦点"。

focusin/focusout：元素内部元素获得/失去焦点的事件

与 focus/blur 不同，focusin/focusout 事件是针对元素内部元素获得/失去焦点的事件。也就是说，当元素内的子元素获得焦点时，会触发 focusin 事件；当子元素失去焦点时，会触发 focusout 事件。需要注意的是，这两个事件是从内向外传播的，也就是说，会依次触发元素内部的父元素的 focusin/focusout 事件。

下面是一个示例代码，演示了 focusin/focusout 事件的用法：

html
<div id="myDiv">
  <input type="text" id="myInput">
</div>
<script>
  const myDiv = document.getElementById('myDiv');
  myDiv.addEventListener('focusin', function() {
    console.log('Div内部元素获得焦点');
  });
  myDiv.addEventListener('focusout', function() {
    console.log('Div内部元素失去焦点');
  });
</script>

在上述代码中，当文本输入框获得焦点时，会在控制台输出"Div内部元素获得焦点"；当文本输入框失去焦点时，会输出"Div内部元素失去焦点"。这里需要注意的是，即使是文本输入框获得/失去焦点，实际触发事件的是其父元素。

在处理元素获得/失去焦点的情况时，我们可以根据具体的需求选择使用 focusin/focusout 或 focus/blur 事件。如果只关注元素自身的焦点变化，那么使用 focus/blur 即可；如果需要关注元素内部子元素的焦点变化，那么应该选择使用 focusin/focusout。在实际开发中，根据具体的场景选择合适的事件可以提高代码的可读性和维护性。

希望通过本文的介绍，你对 focusin/focusout 和 focus/blur 的区别有了更清晰的理解，并能灵活运用于实际的开发中。