一：onmouseover、onmouseout：
鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
二：onmouseenter、onmouseleave：
没有事件冒泡，其他跟onmouseover 没有区别！！！
鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
三：onmousemove ：当鼠标移动的时候 常用语canvas 绘制
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。
例如：当做商城导航栏，需要鼠标移动到子元素（例如：商品名）上，然后显示父元素的另一个子元素（例如：商品详情）
此时：用onmouseover =》示例: 将Img 放大
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- function bigImg(x)
- {
- x.style.height="160px";
- x.style.width="160px";
- }
- function normalImg(x)
- {
- x.style.height="100px";
- x.style.width="100px";
- }
- </script>
- </head>
- <body>
- <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >
- <p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>
- <p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>
- </body>
- </html>
onmousemove事件：示例代码
<!DOCTYPE html><html><head><script>functionmyFunction(e){x=e.clientX;y=e.clientY;coor="Coordinates: ("+ x +","+ y +")";document.getElementById("demo").innerHTML=coor}functionclearCoor(){document.getElementById("demo").innerHTML="";}</script></head><body style="margin:0px;"><div id="coordiv"style="199px;height:99px;border:1px solid"onmousemove="myFunction(event)"onmouseout="clearCoor()"></div><p>Mouse over the rectangle above,and get the coordinates of your mouse pointer.</p><p id="demo"></p></body></html>