在前端开发过程中，我们经常需要在用户与网页进行交互时做出相应的响应。其中，焦点相关事件是非常重要的一部分，因为它们能够告诉我们用户当前正在关注的元素是哪个。在处理焦点事件时，我们通常会遇到 focus、blur、focusin 和 focusout 这四个事件。本文将详细介绍这四个事件的区别，并通过示例代码来说明它们的使用。
focus 与 blur
首先，让我们看一下 focus 和 blur 两个事件。当一个元素获得焦点时，浏览器会触发 focus 事件；当元素失去焦点时，浏览器会触发 blur 事件。例如，我们可以监听一个 <input> 元素的 focus 和 blur 事件，以便在用户聚焦或离开该元素时做出相应的操作：
-- -------------------- ---- ------- ------ ------------ ----------- -- -------- ----- ------- - ----------------------------------- --------------------------------- -- -- - ----------------------- --- -------------------------------- -- -- - ------------------------- --- ---------
上述代码会在控制台输出相应的信息，以告诉我们输入框当前是否聚焦。
focusin 与 focusout
下面，让我们看一下 focusin 和 focusout 两个事件。和 focus、blur 事件不同，focusin 和 focusout 是冒泡事件，即事件会从目标元素向上冒泡到祖先元素。当一个元素获得焦点时，浏览器会先触发该元素的 focusin 事件，然后再依次触发它的祖先元素的 focusin 事件。类似地，当元素失去焦点时，浏览器会先触发该元素的 focusout 事件，然后再依次触发它的祖先元素的 focusout 事件。
例如，我们可以监听一个 <div> 元素及其子元素的 focusin 和 focusout 事件，以便在任何一个子元素获得或失去焦点时做出相应的操作：
-- -------------------- ---- ------- ---- ----------- ------ ----------- -- ------------- ----------- ------ -------- ----- ----- - --------------------------------- --------------------------------- ------- -- - --------------- ----------------------- ------- --- ---------------------------------- ------- -- - --------------- ----------------------- --------- --- ---------
上述代码会在控制台输出相应的信息，以告诉我们当前哪个元素已经聚焦或失去焦点。
需要注意的是，由于 focusin 和 focusout 是冒泡事件，因此它们可能会被其他元素的事件监听器所截获，从而影响到我们预期的结果。为了避免这种情况，我们可以使用 event.stopPropagation() 方法来阻止事件的进一步传播。
总结
综上所述，focus 和 blur 两个事件只关注当前元素的焦点状态，而 focusin 和 focusout 两个事件不仅关注当前元素的焦点状态，还能够向上冒泡到祖先元素。在实际开发中，我们需要根据具体需
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27735