onmouseout和onmouseover,onmousemove什么意思
javascript中onmouseover和onmouseout
htmlheadtitle关于表格颜色/title script language="JavaScript" type="text/javascript"
var tmpColor="";
var clickcolor="#aac6f8";
var arrBg=["#ffffff","#d8e9fd"]; //表格交替色 ///////////////单击改变行颜色////////////////
function clickto(){source=event.srcElement; brif (source.tagName=="TR"||source.tagName=="TABLE")return; brwhile(source.tagName!="TD")source=source.parentElement;source=source.parentElement; brvar ss=source.parentElement; brwhile(ss.tagName!="TABLE"){ brss=ss.parentElement;sst=ss.getElementsByTagName("td"); brfor(k=0;ksst.length;k++){sst[k].style.backgroundColor="";}}cs=source.children;
if(cs[1].style.backgroundColor!=clickcolor){for(i=0;ics.length;i++){cs[i].style.backgroundColor=clickcolor;}}
else{for(i=0;ics.length;i++){cs[i].style.backgroundColor="";}}}
///////////////单击改变行颜色//////////////// ///////////////鼠标onmousemove,onmouseout时的颜色////////////////////
function fmove(){
var e=event.srcElement;
if(e.tagName=="TD"){e.parentNode.style.backgroundColor="#aac6f8"};}
function fout(){
var e=event.srcElement;
var thisRow; //本行行数
if(e.tagName=="TD"){thisRow=e.parentElement.rowIndex;}
tmpColor=thisRow%2==0?arrBg[0]:arrBg[1]; //根据行数定颜色
if(e.tagName=="TD"){e.parentNode.style.backgroundColor=tmpColor;}
}
///////////////鼠标onmousemove,onmouseout时的颜色//////////////////// ///////////////设置表格交替色//////////////////////
function setTableBg(){
var oTr=t.rows;
var intLenTr=oTr.length;
var intLenBg=arrBg.length;
for(var i=0;iintLenTr;i++){
intMod=i % intLenBg;
oTr[i].style.backgroundColor=arrBg[intMod];
}
}
///////////////设置表格交替色////////////////////// /script
/headbody onload=setTableBg() table id="t" onmouseup="clickto()" onmousemove="fmove()" onmouseout="fout()" width="488" height="142" border="1"
tr
td第一行/td
tdessdgfsrg/td
tdegweg/td
/tr
tr
td第二行/td
tdwewe/td
tdwayuiyuiyui/td
/tr
tr
td第三行/td
tdewgwew/td
tdwegwesegeg/td
/tr
tr
td第四行/td
tdesrgferg/td
tdegweg/td
/tr
tr
td第五行/td
tdwewe/td
tdwaegwe/td
/tr
tr
td第六行/td
tdewgwew/td
tdwegwesegeg/td
/tr
/table /body/html
js鼠标移动事件(onmouseover,onmouseout)放在和控件中有什么不同？
接触了onmouseover事件和onmouseout事件，一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件。
突然发现这些只是对它们简单的描述，下面让我们一起看看它们终究还有奇怪的特性。
首先实现一个盒子。
给这个盒子上绑定上onmouseover事件和onmouseout事件。
发现它们不会发生什么问题。
让我们创建一个B元素，让它被嵌套在A元素中，作为A的子元素。
依旧只给外层父元素A绑定onmouseover事件和onmouseout事件，当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件。
所以说当鼠标移入移除A的子元素B的时候，B的onmouseover事件和onmouseout事件会触发，但是它自己没有这两个事件啊，就把这两个事件传递给了它的父元素A，A有这两个事件所以就发生了我们看到的情况。
onmouseover和onmouseout的用法？
意思是当鼠标滑上触发什么事件，滑离又触发什么事件，比如让鼠标滑上滚动、滑离停止：onMouseOver="this.stop()" onMouseOut="this.start()" 。都是可以的。用处很多。
onmouseover 和onmouseout的闪烁问题
在onmouseover时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了，非IE的浏览器并不支持contains函数，不过既然已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null typeof(obj.tagName) != "undefind")
{
if(obj == this)
Return true;
Obj = obj.parentNode;
}
return false;
};
}