Html标记的onmouseover和onmouseout事件的本质区别及配合使用
一都编程2020-03-15 17:09
#JavaScript#onmouseover和onmouseout事件都是关于鼠标指针移动至Html元素的事件，二者的区别是：
(1). Onmouseover事件是指将光标移至元素上产生的事件。
(2). Onmouseout事件是指将光标从元素上离开时产生的事件。
onmouseout事件这2个事件往往是一起使用的，当光标移至元素上触发一个事件，产生一些效果。而在光标离开元素后又触发一个事件恢复原来的效果。
例如：当光标放在一个按钮上后，按钮的背景色发生变化，而当光标离开按钮后，背景色恢复原来的颜色。
因此，在使用时，会将onmouseover和onmouseout事件同时放在一个Html标记上。
onmouseover和onmouseout事件使用的基本语法如下：
onmouseover=“JavaScript函数或代码” onmouseout= JavaScript函数或代码”
如下在VS2019中举例说明onmouseover和onmouseout这2个事件的使用，功能是对按钮的背景色发生变化，核心代码如下：
<script>function f1(htmlTag) { htmlTag.style = "background-color:red;color:white;border:0px;width:80px;height:25px;"; } function f2(htmlTag) { htmlTag.style = "background-color:blue;color:white;border:0px;width:80px;height:25px;"; }</script><input type="button" style="background-color:blue;color:white;border:0px;width:80px;height:25px;" value="提交" onmouseover="f1(this)" onmouseout="f2(this)" />
解释一下上面的核心Html+JavaScript代码：
编写了2个JS函数，用于指定按钮的样式。当光标移至按钮内，则触发f1函数，修改背景色为red（红色）。当光标离开按钮时，则触发f2函数，修改背景色为blue（蓝色），这个颜色也是按钮原来的颜色。好了，迫不及待的要看一下效果了：
这是第一次运行后出现的页面效果，按钮的文字颜色是白色，背景色是蓝色。现在将光标放在此按钮上：
上图没有捕捉到光标，光标确实是放在按钮上了，触发了f1()函数，将按钮的背景色修改为了红色。
当光标离开后，按钮又恢复了原来样貌，这就是onmouseover和onmouseout事件2个件事的结合应用的案例。
当然，也可以对文本框的样式使用onmouseover和onmouseout事件发生变化，完整代码如下：
<!DOCTYPE html><html><head><title></title> <script type="text/javascript"> function overColor() { var t = document.getElementById("Text1"); t.style.border = "1px solid #ddd;"; t.style.color = "blue"; t.style.backgroundColor = "#ccc"; } function outColor() { var t = document.getElementById("Text1"); t.style.border = ""; t.style.color = ""; t.style.backgroundColor = ""; } </script></head><body> <input id="Text1" onmouseover="overColor()" onmouseout="outColor()" type="text" /></body></html>
运行这段Html+JS代码，效果如下图所示：
在此图中，文本框的样式是默认的状态，现在将光标移动到文本框中，看会发生什么？
上图是鼠标移至文本框上之后触发了onmouseover事件，执行了overColor()函数中的代码，将文本框的背景色和文字颜色发生了变化。
当鼠标光标离开了这个文本框时就会触发onmouseout事件，执行的函数是outColor()，让文本框恢复原状。
举报/反馈
0
0
收藏
分享
