是否有直接的方法檢測容器元素中的焦點更改？

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