title: the mouseout event occur more than one time
body: <p>Hi:
  when I add a mouseout event to a parent element,it seems that all of its child are added this event also,it works well if the event is a mouse click and etc.</p>
  
  <p>However for the mouseout event,this will cause some unexpected result.</p>
  
  <p>Take a look at this example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript"&gt;
              function init(){
                  document.getElementById('par').onmouseout=function(){alert('mouse out')};
              }
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload='init()'&gt;
          &lt;div id="par" style="width:400px;height:300px"&gt;
              &lt;div style="background-color:red;width:100%;height:150px"&gt;&lt;/div&gt;
              &lt;div style="background-color:black;width:100%;height:150px"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>please Move from the red div to the black div,then move out of the black div,then you will get two alert window,I just want one.</p>
  
  <p>So how to fix it?</p>