是否有直接的方法检测容器元素中的焦点更改？

Question

在下面的代码：

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

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

是否有检测的简单方法，当通过DIV它的一个子获得或失去焦点，无论是直接或间接地？

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

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

我确定必须有一个简单直接的方法，但现在我想不出一个。
_{（通过简单的我的意思是听几个事件加一对夫妇的一个班轮事件处理程序，这就是它）}

Answer 1

我发现使用jQuery一个简单的解决方案：

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

这不是直截了当，但至少它是一个单线。

它需要支持：
focusin/focusout
Node.contains
document.activeElement