最近在學(xué)習(xí)JavaWeb時，有用到鼠標(biāo)移動事件，所以今天在這里記錄一個相關(guān)的案例，同時也是對相關(guān)知識的一個鞏固，效果為在鼠標(biāo)移動到表格對應(yīng)行列時，該行列的背景顏色發(fā)生變化。
效果如下：
其中用到是onmouseover和onmouseou事件t，同時還有一個作用相似的事件叫做onmousemove，所以在這里先對這三種鼠標(biāo)事件做一個簡單的對比：
- 在時間上：如果兩個事件同時存在，先是onmousemove事件觸發(fā)后，才會觸發(fā)onmouseover事件。
- 在按鈕上：onmousemove和onmouseover都不區(qū)分鼠標(biāo)按鈕
- 在動作上：onmouseover是在鼠標(biāo)剛移入?yún)^(qū)域的時候觸發(fā)，onmousemove是除了鼠標(biāo)移入?yún)^(qū)域時觸發(fā)外，鼠標(biāo)在區(qū)域內(nèi)移動同樣也會觸發(fā)事件。
- 兩者區(qū)別：當(dāng)鼠標(biāo)移過當(dāng)前對象區(qū)域時就產(chǎn)生了onmouseover事件，所以onmouseover事件有個移入移出的過程,當(dāng)鼠標(biāo)在當(dāng)前對象區(qū)域上移動時就產(chǎn)生了onmousemove事件，只要是在對象上移動而且沒有移出對象的，那么就是onmousemove事件。
onmouseout事件則是在鼠標(biāo)移出對象區(qū)域時觸發(fā)。
搞懂這三者之間的關(guān)系，在進(jìn)行鼠標(biāo)經(jīng)過事件的處理時只需使用對應(yīng)的事件觸發(fā)即可：
接下來是對上述事件和效果的代碼：
Jsp部分代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<%@ 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>學(xué)校</th><th>專業(yè)</th><th>人數(shù)</th></tr> <tr id = "t1"><th>濟(jì)大</th><th>軟件</th><th>2000</th></tr> <tr id = "t2"><th>北大</th><th>機(jī)械</th><th>3000</th></tr> <tr id = "t3"><th>浙大</th><th>生物</th><th>4000</th></tr> </table> </body></html> |
Js部分代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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"; }} |
到此這篇關(guān)于Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Javaweb 鼠標(biāo)移入移出表格內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_44985880/article/details/108401258
