JavaScript OnMouseOut事件
发布时间:2025-05-22 18:48:54 发布人:远客网络
一、JavaScript OnMouseOut事件
1、javascript onmouseover和onmouseout事件
2、onmouseover和onmouseout鼠标移入移出时触发的事件：
3、 onmouseover用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
4、 onmouseout用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
5、onmouseover和onmouseout这两个事件在javascript中较常用。
6、下面通过一个示例更深入了解这两个事件的使用：
7、示例：鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。
8、<title>鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。</title>
9、.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
10、 var woaixuexi=document.getElementById("woaixuexi");
11、 woaixuexi.style.background="yellowgreen";
12、 var xuexi=document.getElementById("woaixuexi");
13、 xuexi.style.background="#abcdef";
14、<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>
二、js移除onmousemove属性
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如，fromElement和 toElement属性只对 onmouseover和 onmouseout事件有意义。
下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
if(window.event.srcElement.tagName=="A"&& window.event.shiftKey)
window.event.returnValue= false;
<BODYοnclick="cancelLink()">
下面的例子在状态栏上显示鼠标的当前位置。
<BODYοnmοusemοve="window.status='X='+ window.event.x+' Y='+ window.event.y">
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
--------------------------------------------------------------------------------
当alt键按下时，值为 TRUE，否则为 FALSE。只读。
这个属性仅用于onmousedown, onmouseup,和 onmousemove事件。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。
检测是否接受上层元素的事件的控制。
event.cancelBubble[= cancelBubble]
FALSE允许被上层元素的事件控制。这是默认值。
三、onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法
本文给大家介绍onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
鼠标移入移出图片切换很常见的，那我们就来说说它的实现方法：
第一种方法，也是最简单的一种，在html里就可实现
<img class="img" src="img/dongtai.png" onmouseover="this.src='img/HBuilder.png'" onmouseout="this.src='img/dongtai.png'"/>先默认一张图片，然后在写图片移入移出的图片。
<img name="image1" src="img/dongtai.png" onmouseover="mouseOver()" onmouseout="mouseOut()"/>function mouseOver(){
document.image1.src="img/HBuilder.png"
document.image1.src="img/dongtai.png"
}在js里面写好替换图片的方法，在html里面调用。
若是不用onmouseover和onmouseout的话，还可以这样写
<p class="bg"></p>.bg{background: url(img/HBuilder.png) no-repeat;height: 300px;}
.bg:hover{background: url(img/dongtai.png) no-repeat;}这三种方法都可以实现鼠标移入移出图片切换效果，是不是很简单，大家可以动手试试！
