# 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事件结合案例：**
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下拉导航菜单素材-2</title>
<style type="text/css">
*{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;}
</style>
<script type="text/javascript">
//要获取所有的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;i<liArr.length;i++){
//每个li上，隐藏所有的dl,只显示当前li下的dl ,dl只有1个
// this.getElementsByTagName("dl") ,一组值 数组
// ,取第一个dl this.getElementsByTagName("dl")[0] arr[0]
liArr[i].onmouseover = function(){
//判断当前的li下是否有dl
if(this.getElementsByTagName("dl").length>0){
//遍历所有的dl，显示所有的dl
var subArr = this.getElementsByTagName("dl");
for(var j=0;j<subArr.length;j++ ){
subArr[j].style.display="block";
}
}
};
//如果离开了li ,隐藏页面上所有的dl
liArr[i].onmouseout = function(){
//隐藏所有的dl
for(var j=0;j<dlArr.length;j++){
dlArr[j].style.display="none";
}
};
}
};
</script>
</head>
<body>
<div id="menuBox">
<ul id="nemus">
<li><a href="#">首页</a></li>
<li >
<a href="#">新闻</a>
<dl style="display:none" >
<dt><a href="#">国际要问</a></dt>
<dt><a href="#">国内动态</a></dt>
</dl>
<dl style="display:none" >
<dt><a href="#">紧急要问</a></dt>
<dt><a href="#">社会动态</a></dt>
</dl>
</li>
<li >
<a href="#">游戏下载</a>
<dl style="display:none">
<dt><a href="#">射击小游戏</a></dt>
<dt><a href="#">动作小游戏</a></dt>
<dt><a href="#">单击小游戏</a></dt>
<dt><a href="#">装扮小游戏</a></dt>
</dl>
<dl style="display:none" >
<dt><a href="#">AAAAA</a></dt>
<dt><a href="#">BBBBB</a></dt>
</dl>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
网友评论