# JavaScript事件 #

事件可以是浏览器行为，也可以是用户行为！

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

JavaScript中的 事件类型有很多种，比如：

1、按钮的单击事件。

2、鼠标悬浮在某个图片上，有着特殊效果。

3、鼠标离开某个图片上，效果消失。

4、使用键盘上某个键，后出现效果。

5、等等……

## onmouseover事件 ##

**onmouseover事件：指鼠标移动都某个指点的HTML标签上，会出现什么效果。**

例如：

    var p = document.getElementById("p")  /*获取id名字为p的标签*/

    /* 给获取到的id添加事件 */

    p.onmouseover = function (){

    alert("鼠标已经移动上来！");

    }

## onmouseout事件 ##

**onmouseout事件：指鼠标移出某个指点的HTML标签后，会出现什么效果。**

例如：

    var p = document.getElementById("p")  /*获取id名字为p的标签*/

    /* 给获取到的id添加事件 */

    p.onmouseout = function (){

    alert("鼠标已经移出！");

    }

**onmouseover和onmouseout事件结合案例：**

    下拉导航菜单素材-2

         *{margin:0;padding:0;}

     ul,li{list-style: none;}

     #menuBox{width:1000px; margin:30px auto;background-color: #eeeeee;border:1px solid #cccccc;height:40px;line-height: 40px;}

     #nemus > li{float: left;}

     #nemus > li  a{display: block;width:140px;text-decoration: none;color: #000;text-align: center;}

     #nemus  li dl{border:1px solid #ccc;background-color: #eeeeee;width:138px;}

     #nemus  li dl dt{border-bottom: 1px solid #ccc;}

            //要获取所有的li, 给每个li加上onmouseover ,onmouseout事件  

            // 鼠标滑过对应的li时，如果该li下有dl,则显示该li下的dl , 鼠标划出li时，隐藏页面上所有的dl  

            window.onload = function(){

                //获取所有的li

                var liArr = document.getElementById("nemus").getElementsByTagName("li");

                console.log("li的个数："+liArr.length);

                //获取所有的dl 

                var dlArr =  document.getElementById("nemus").getElementsByTagName("dl");

                console.log("dl的个数："+dlArr.length);

                //遍历

                for(var i=0;i0){

                            //遍历所有的dl，显示所有的dl

                            var subArr = this.getElementsByTagName("dl");

                            for(var j=0;j