JavaScript focusout 事件

JavaScript 的 focusout 事件是当元素即将失去焦点时执行的事件处理程序。除此之外，我们还学习了 blur，它也是一个在 JavaScript 中使用的事件处理程序。blur 和 focusout 都是焦点事件，但它们之间存在区别。区别在于 blur 事件不冒泡，而 focusout 事件会冒泡。因此，当用户发现一个元素或其子元素即将失去焦点时，用户应该监听该元素的 onfocusevent。

因此，如果用户执行以下操作，将触发 focusout 事件：

1. 当用户点击活动元素外部时，焦点会丢失。
2. 切换到另一个应用程序或文件。
3. 使用 TAB 键/访问键从活动元素导航离开，从而导致焦点丢失。
4. 在活动元素上调用 blur 方法。
5. 在可以活动的非活动元素上调用 setActive 方法。
6. 在可以活动的非活动元素上调用 focus 方法。

注意：focusin 事件与 focusout 事件正好相反，它在用户在活动元素上创建焦点时执行事件操作。对于 focusin，我们使用 onFocusIn 事件处理程序。

focusout 事件示例

让我们通过下面的例子来了解 focusin 和 focusout 事件。

代码解释

1. 上面的代码是基于 HTML 和 JavaScript 的代码。
2. 在 HTML 的 body 部分，我们创建了一个包含用户名和密码字段的表单。
3. 在 JavaScript 的 script 部分，我们创建了两个函数，Focus_In 用于 focusin 事件，Focus_Out 用于 focusout 事件。
4. 在创建表单时，我们调用了 Focus_In 和 Focus_Out 函数。
5. 将执行两个操作——当用户点击任何文本框时，文本颜色会变为红色，表示焦点已进入。因此，调用了 Focus_In 函数。当用户点击页面上任何地方但不是活动部分（即文本框内的文本或密码）时，会发生另一个操作，表示焦点已丢失，因此颜色变回蓝色。因此，在这种情况下，会调用 Focus_Out 函数。
6. 另请注意，当用户在 Web 浏览器上执行代码时，文本颜色显示为黑色，除非用户执行了任何操作。

上述代码的输出如下所示