title: Why does mouseout is triggered when child elements hovered?
body: <p>The wonder is the mouseout event triggering when the mouse cursor goes over the child node. Why does it happen if the cursor hasn't been out of the parent node? Please consider this:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type='text/javascript'&gt;
  
      function someFunc(obj) {
          document.getElementById('info').innerHTML = 'over';
          document.getElementById('info3').innerHTML = 'over';
  
          obj.onmouseout = function() { 
              document.getElementById('info2').innerHTML = 'out';
              document.getElementById('info3').innerHTML = 'out';
          }
  
          if (!obj.theChild) {
              var theChild = document.createElement('div');
              theChild.style.position = 'relative';
              theChild.style.left = '20px';
              theChild.style.top = '20px';
              theChild.style.width = '40px';
              theChild.style.height = '40px';
              theChild.style.background = '#eeee00';
              obj.theChild = theChild;
              obj.appendChild(theChild);
          }
      }
  
  &lt;/script&gt; 
  &lt;head&gt;
  &lt;body&gt;
  
      &lt;span id="info"&gt;&lt;/span&gt; &lt;span id="info2"&gt;&lt;/span&gt; &lt;span id="info3"&gt;&lt;/span&gt;
  
      &lt;div style="position:absolute;top:100px;left:100px;width:100px;height:100px;background:#000000;" onmouseover="someFunc(this);"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>