js监听事件

时间 2019-11-13

原文原文链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border: 1px solid darkgrey;
width: 600px;
height: 300px;

}
tr td{
border: 1px solid saddlebrown;
text-align: center;
}
.Lighheight{
background-color: seashell;
}
</style>
<script>
/*1.首先分析怎么设置高亮
* 当鼠标移进一个tr内时，就将该tr的显示亮度（样式）改变，移出后又将亮度恢复回来（回到原来样式）
*
* 但出现一个问题：就是鼠标移进的时候对该tr设置了一个样式，当鼠标移出后有设置了一个样式，那文档到底显示的是那个样式呢？
* 答案是同一元素上设置多种样式，后面的样式会覆盖前面的样式
*
*2.因此针对上面的问题咱们能够设置一个事件监听，知足状况一咱们执行一个样式，知足状况二咱们执行另一种样式
* 接着一块儿来学习下事件监听
* Objet.addEventListener(eventName,function,false)
* Objet要绑定监听的元素
* addEventListener事件监听函数名(固定的函数名)
* eventName 事件名（就如鼠标移进，鼠标移出事件）
* function 函数名（要执行的函数）
* false 是否捕获（通常设为false）有兴趣的了解一些dom事件模型，冒泡模型，捕获模型，就知道为何设false而不设ture
*
* 3.上面进行大体的分析和学习，接下来咱们分析下下面的代码
*
* */
window.onload = function(){ //当dom文档树所有加载完毕后（注意一点ready是dom树构建完成后就加载，不等图片下载）执行匿名函数function
var tr = document.getElementsByTagName("tr"); //注意getElementsByTagName与getElementsByName的区别，前者是获取标签名后者是获取属性名
for (i=0;i<tr.length;i++) {
tr[i].addEventListener("mouseenter",function(event){
event.target.className = "Lighheight"; //target表示返回触发事件的对象，event表示事件的状态

},false);
tr[i].addEventListener("mouseleave",function(event){ //mouseleave与mouseout 二者都表示离开就触发后者离开选择元素和其子元素都会触发，前者只在离开选择元素时才会触发
event.target.className ="";
},false);
}
};

</script>
</head>
<body>
<table>
<tr >
<td>姓名</td>
<td>地点</td>
<td>描述</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</body>
</html>css