Javaweb 鼠标移入移出表格颜色变化的实现_Java教程

Javaweb 鼠标移入移出表格颜色变化的实现

2020-09-12 00:23灰小猿 Java教程

这篇文章主要介绍了Javaweb 鼠标移入移出表格颜色变化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化。

效果如下：

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%>" rel="external nofollow" >

									  <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" rel="external nofollow" >

									 -->

									 <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";

									  }

									}