onmouseover和onmouseout的那些事

这篇文章来自一个偶然。。。
以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的。就是一对名字很相近的事件。一组是onmouseover()和onmouseout()。另一组就是onmouseenter()和onmouseleave()。后来自己看博客加上自己的练习终于搞明白了这两组的区别。ommouseover()和onmouseout()表示鼠标移入和移出时触发。onmouseenter()和onmouseleave()表示的是鼠标穿过和穿出的时候触发。是不是还不太明白。。那么再具体一点就是假设onmouseenter()和onmouseleave()其内部有子元素的话，则在其对象内部穿过子元素时不会触发。很简单看个例子

http://www.jb51.net/article/40560.htm

话说回来像我这样的人怎么可能来分享别人分享过的东西呢，当然是碰到了一个问题哈。等会下面贴代码

最后要达到的效果大概如下图

开始页面只显示一个灰色的框，内容就是“显示”。（图一）

当鼠标移入到显示上边时，效果如下，出现一个浅灰色的表单。表单嵌在一个div里。（图二）

然后当你在鼠标在浅灰色的框内任意移动时，表单还依然在。当你鼠标移出表单时，这个表单就会消失，恢复到图一的状态只有一个“显示”按钮。本来onmouseover加上onmouseout配合使用这个并不会有什么问题，这个表单大概每天都会写到，这个应该算是很基础的东西。

但是问题来了，我这人就是吃饱了没事做，要是只加onmouseout()不加onmouseover()事件时，当移到"显示"上，表单显示，但是从上边移入表单，比如从“显示”移入到输入框时，表单就神奇的消失了。后来也想了一会想不到为什么不加onmouseover()时，移入表表单就会消失，难道这个表单不属于此div吗，于是我又加上了onmouseover()事件，效果又正常了。

     <div id="box">
         <p id="show" onmouseover="document.getElementById('login').style.display='block'">显示</p>
         <div id="login"  onmouseout="document.getElementById('login').style.display='none'">             <!--  div默认不显示 -->
             <input type="text" placeholder="网易邮箱"><br>
             <input type="password" placeholder="请输入密码">
             <div>
                 <input type="checkbox" style="width:20px;">十天内免登录<span>忘记密码？</span>
                 <P>免费下载网易官方手机邮箱应用</P>
             </div>
             <button>登录</button>
         </div>
     </div>

然后我懂了，这个表单元素是外部div元素的子元素，当从“显示”移到表单的输入框时，不加onmouseover()，只有onmouseout()事件，会立即触发onmouseout()事件，于是就是从“显示”按钮移入表单经过输入框时，表单会消失。当加上onmouseover()时，同样的路线，虽然会触发onmouseout()事件，但同时也会触发onmouseover()事件。于是情况就正常了。。

还有我就想onmouseleave()效果应该等同与同时加上以上两个事件，果不其然，只加onmouseleave()效果不变。原因就是开头说过的假如onmouseenter()和onmouseleave()其内部有子元素的话，则在其对象内部穿过子元素时不会触发。

代码如下

     <div id="box">
         <p id="show" onmouseover="document.getElementById('login').style.display='block'">显示</p>
         <div id="login" onmouseleave="document.getElementById('login').style.display='none'">   <!--  div默认不显示-->
             <input type="text" placeholder="网易邮箱"><br>
             <input type="password" placeholder="请输入密码">
             <div>
                 <input type="checkbox" style="width:20px;">十天内免登录<span>忘记密码？</span>
                 <P>免费下载网易官方手机邮箱应用</P>
             </div>
             <button>登录</button>
         </div>
     </div>

于是愉快的解决了问题。。

终。