Hello，你好哇，我是灰小猿！一个超会写bug的程序员！
最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化。
效果如下：
其中用到是onmouseover和onmouseou事件t，同时还有一个作用相似的事件叫做onmousemove，所以在这里先对这三种鼠标事件做一个简单的对比：
在时间上：如果两个事件同时存在，先是onmousemove事件触发后，才会触发onmouseover事件。
在按钮上：onmousemove和onmouseover都不区分鼠标按钮
在动作上：onmouseover是在鼠标刚移入区域的时候触发，onmousemove是除了鼠标移入区域时触发外，鼠标在区域内移动同样也会触发事件。
两者区别：当鼠标移过当前对象区域时就产生了onmouseover事件，所以onmouseover事件有个移入移出的过程,当鼠标在当前对象区域上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，那么就是onmousemove事件。
onmouseout事件则是在鼠标移出对象区域时触发。
搞懂这三者之间的关系，在进行鼠标经过事件的处理时只需使用对应的事件触发即可：
接下来是对上述事件和效果的代码：
Jsp部分代码：
-
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
-
<%
-
String path = request.getContextPath();
-
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
-
%>
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
<html>
-
<head>
-
<base href="<%=basePath%>">
-
-
<title>表格颜色变化
</title>
-
<meta http-equiv="pragma" content="no-cache">
-
<meta http-equiv="cache-control" content="no-cache">
-
<meta http-equiv="expires" content="0">
-
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
-
<meta http-equiv="description" content="This is my page">
-
<!--
-
<link rel="stylesheet" type="text/css" href="styles.css">
-
-->
-
<script type="text/javascript" src="index.js">
</script>
-
</head>
-
-
<body>
-
<table width = "200" border = "1" align = "center" cellpadding="1" cellspacing="5">
-
<tr id = "t0">
<th>学校
</th>
<th>专业
</th>
<th>人数
</th>
</tr>
-
<tr id = "t1">
<th>济大
</th>
<th>软件
</th>
<th>2000
</th>
</tr>
-
<tr id = "t2">
<th>北大
</th>
<th>机械
</th>
<th>3000
</th>
</tr>
-
<tr id = "t3">
<th>浙大
</th>
<th>生物
</th>
<th>4000
</th>
</tr>
-
-
</table>
-
</body>
-
</html>
Js部分代码：
-
onload =
function() {
-
var t0 =
document.getElementById(
"t0");
-
var t1 =
document.getElementById(
"t1");
-
var t2 =
document.getElementById(
"t2");
-
var t3 =
document.getElementById(
"t3");
-
-
t0.onmouseover =
function () {
-
t0.style.backgroundColor =
"green";
-
}
-
t0.onmouseout =
function () {
-
t0.style.backgroundColor =
"white";
-
}
-
t1.onmouseover =
function () {
-
t1.style.backgroundColor =
"red";
-
}
-
t1.onmouseout =
function () {
-
t1.style.backgroundColor =
"white";
-
}
-
t2.onmouseover =
function () {
-
t2.style.backgroundColor =
"red";
-
}
-
t2.onmouseout =
function () {
-
t2.style.backgroundColor =
"white";
-
}
-
t3.onmouseover =
function () {
-
t3.style.backgroundColor =
"red";
-
}
-
t3.onmouseout =
function () {
-
t3.style.backgroundColor =
"white";
-
}
-
-
}
觉得不错记得点赞关注哟！
大灰狼陪你一起进步！
转载：https://blog.csdn.net/weixin_44985880/article/details/108401258
查看评论