title: Invoke Parent control's event on Child's
body: <p>I have a scenario where I have a container control (basically a ASP.Net user control) and it has couple of child controls. I want the control to collectively determine lost focus event. For example I want the parent control to tell me it has focus only when any of the child control receives the focus and it should tell me that it lost the focus if all of the child control looses the focus. </p>
  
  <p>As a simulation refer to the code below. If you run this sample, you would notice that when you click on Blue rectangle, it would say Blue Focused, then if you click on the Red one, it would say Blue Blur, Red Focused. What I need is when I click on any of them, it should tell me Red Focused and when I click outside it should click Red Blur.</p>
  
  <p>Could some one help me with this? </p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;head runat="server"&gt;
  &lt;title&gt;Untitled Page&lt;/title&gt;
  
    &lt;script type="text/javascript" language="javascript"&gt;
      function RedFocus()   { alert('RedFocus');   }
      function BlueFocus()  { alert('BlueFocus');  }
      function GreenFocus() { alert('GreenFocus'); }
      function RedBlur()    { alert('RedBlur');    }
      function BlueBlur()   { alert('BlueBlur');   }
      function GreenBlur()  { alert('GreenBlur');  }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div onblur="RedBlur()" onfocus="RedFocus()"
    style="background-color: Red; width: 400px; height: 400px;"&gt;
    &lt;div onblur="BlueBlur()" onfocus="BlueFocus()"
      style="background-color: Blue; width: 200px; height: 200px; margin: 50px"&gt;
      &lt;div onblur="GreenBlur()" onfocus="GreenFocus()"
        style="background-color: Green; width: 100px; height: 100px; margin: 25px"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>