onmouseout 和 onmouseleave 的区别

其实在w3c上就有明确的说明。

mouseout:不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave: 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

根据你的业务场景，正确使用api。

附一个伸缩导航栏的实现
需求：1.鼠标触及顶端显示导航栏，移开不显示。（移开后如何找到触发点？使用透明的padding来隐藏触发区域。）
2.显示和隐藏，只有在移开和移入nav的时候才触发，注意性能。（原本想利用事件捕获，后来发现没必要，用mouseleave就行。可见正确用api的重要性。）
css

body{ margin:0 }
li{ display: inline-block;padding: 10px 20px;list-style: none; cursor: pointer;}
li:hover{ background-color: #ccc}
ul{background: #eee;display: inline-block;width: 100%;margin: 0px;}
#nav{background:transparent;padding-bottom: 10px;}/*一般不要用id来写样式，我只是写个demo所以这些细节就随便一些*/
b{margin: 0 20px;}
.show{
     margin: 0px;
     transition: margin 0.2s;
}
.hide{
    margin-top:-40px;
    transition: margin 0.2s;
}

html

<section id="contain">
      <nav id="nav" class="hide">
        <ul>
          <li>标题1</li>
          <li>标题2</li>
          <li>标题3</li>
        </ul>
      </nav>
</section>

js

var contain = document.getElementById("contain");
var nav = document.getElementById("nav");
contain.onmouseover=function(e){
        if(e.target.tagName=="NAV"){
          if(nav.getAttribute("class")==="hide"){
            nav.setAttribute("class","show");
          }
      }
  }
//如果使用mouseout，移到li标签就会触发nav的mouseout事件
contain.onmouseleave=function(e){
       if(e.target.tagName=="NAV"){
          if(nav.getAttribute("class")==="show"){
            nav.setAttribute("class","hide");
          }
      }
    }