有没有一种简单的方法来检测容器元素中的焦点变化

Is there a straightforward way of detecting focus changes in a container element?

本文关键字：检测元素变化焦点方法简单一种有没有更新时间：2023-09-26

在下面的代码中：

div {padding: 10px; border: 1px solid black}
div.whenFocused {background: yellow}
input {display: block}
* {outline: none}

<div tabindex=0>
	Text:
	<input>
</div>

有没有一种简单的方法来检测DIV何时直接或间接地通过其子项获得或失去焦点？

每当用户与 DIV 交互时，我需要 DIV 具有黄色背景。DIV 是可聚焦的，因此用户可以通过键盘或鼠标到达那里。
如果他们使用鼠标，则单击 DIV 内的任意位置必须触发背景颜色更改。此外，在 DIV 外部单击必须使背景色恢复正常。

我已经通过几个辅助函数和侦听不同元素上的多个事件实现了此行为。但是对于这么简单的事情来说，代码太多了。

我相信一定有一个简单明了的方法，但我现在想不出一个。
_{（简单来说，我的意思是侦听几个事件加上几个单行事件处理程序，仅此而已）}

我使用jQuery找到了一个简单的解决方案：

$('div').on('focusin focusout',function(){ $(this)[(this.contains(document.activeElement)?'add':'remove')+'Class']('whenFocused') })

这并不完全简单，但至少它是单行的。

它需要支持：
聚焦/聚焦
节点包含
document.activeElement