Javaweb鼠标事件案例分析—鼠标移入移出表格颜色变化
时间:2022-07-25
本文章向大家介绍Javaweb鼠标事件案例分析—鼠标移入移出表格颜色变化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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";
}
}
觉得不错记得点赞关注哟!
大灰狼陪你一起进步!
- 浅谈ASP.NET的Postback
- redis配置详解(中英文)
- 我所理解的Remoting(1):Marshaling & Activation[下篇]
- 5分钟短视频,带你走进日志易SPL,助你日志分析更容易
- Unity Application Block 1.2 for Silverlight - December 2008
- 算法学堂 - 二分查找及其变形
- Zookeeper权限管理与Quota管理
- 刘鹏:保大还是保小?无人汽车也将面临这样的道德窘境
- 浅谈DNS
- silverlight寻奇 - Graphite
- 程序运算性能测量
- 2018年比特币的真正瓶颈在这里
- 玩转 React 服务器端渲染
- WCF版的PetShop之二:模块中的层次划分[提供源代码下载]
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 视频上云EasyNTS组网硬件设备登录后自动下线并清除设备信息是什么原因?
- 震惊! 再也不怕蹭网被发现了!
- 国标GB28181协议客户端EasyGBS国标视频平台级联EasyNVR:EasyNVR到EasyGBS上是如何注册及注销的?
- git全局忽略文件配置
- 2018-10-16近期vue开发总结
- 有赞埋点实践
- 树莓派配置LEDE(openwrt衍生版)拨号
- Android 沉浸式解析和轮子使用
- 腾讯云CDN使用(接入方式:COS源)
- 工作流引擎在有赞 DevOps 中的实践
- 微信带备注群发真好玩!
- 微信机器人-定时群发+智能回复
- 治电EggJS开发规范
- jenkins远程部署项目
- puppeteer爬取house365租房数据