web-前端之事件冒泡,其中包括(onmousemove,onmouseover,onmouseout,onmouseleave,onmouseup,onmouseentter)可用于一些计数小游戏
来源:互联网 发布:解压缩软件 编辑:程序博客网 时间:2024/06/05 03:46
这个是专门写了几个鼠标事件,其中很清晰的描述了每一个鼠标事件的发生和结束,可以很清楚的看见每一种事件的变化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; } </style> <script> var a = 0;//声明 var b = 0; var c = 0; var d = 0; var e = 0; //鼠标移动事件 function myMove(){ a++; // a = a + 1; var font = document.getElementById("a");//获取font标签对象 font.innerHTML = a; } //鼠标移入事件over function myOver(){ b++; var font = document.getElementById("b");//获取font标签对象 font.innerHTML = b; } //鼠标移出事件out function myOut(){ c++; var font = document.getElementById("c");//获取font标签对象 font.innerHTML = c; } //鼠标移入事件enter function myEnter(){ d++; var font = document.getElementById("d");//获取font标签对象 font.innerHTML = d; } //鼠标移出事件leave function myLeave(){ e++; var font = document.getElementById("e");//获取font标签对象 font.innerHTML = e; } </script> </head> <body> <div onmousemove="myMove()"> <font id="a">0</font> <p>鼠标移动事件onmousemove</p> </div> <!--事件冒泡--> <div onmouseover="myOver()"> <font id="b" style="border: 1px solid #000000;">0</font> <p>鼠标移入事件onmouseover</p> </div> <div onmouseout="myOut()"> <font id="c">0</font> <p>鼠标移出事件onmouseout</p> </div> <div onmouseenter="myEnter()"> <font id="d">0</font> <p>鼠标移入事件onmouseenter</p> </div> <div onmouseleave="myLeave()"> <font id="e">0</font> <p>鼠标移出事件onmouseleave</p> </div> </body></html>
阅读全文
1 0
- web-前端之事件冒泡,其中包括(onmousemove,onmouseover,onmouseout,onmouseleave,onmouseup,onmouseentter)可用于一些计数小游戏
- onMouseEnter、onMouseLeave、onMouseOver、onMouseOut冒泡事件
- JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
- onMouseOver, onMouseMove, onMouseDown, onMouseUp, onMouseOut 的介绍和区别
- onMouseOver, onMouseMove, onMouseDown, onMouseUp, onMouseOut 的介绍和区别
- HTML onmouseover, onmouseout , onmousemove 事件属性
- onmouseover 和 onmouseout onmouseleave
- onmouseover 和 onmouseout onmouseleave
- onMouseOver 和 onMouseOut事件冒泡
- JS事件:onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
- onmouseenter 、onmouseover 、onmouseout、onmouseleave区别
- onmouseenter,onmouseleave与onmouseover,onmouseout
- DataGrid中的每一行,绑定onmouseover、onmousemove、onmouseout事件
- onmousemove、onmouseover、 onmouseup及onclick的区别
- onmousemove、onmouseover、 onmouseup及onclick的区别
- onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
- javascript事件(onclick/onmouseover/onmouseout等)
- js事件(onmouseover和onmouseout)
- 单款地图下载器如何授权
- Android深度探索:HAL与驱动开发学习笔记--并发控制之互斥锁
- Cookie
- C语言union共同体
- 金蝶k3 K314.3 14.2 14.1 14.0破解全系列授权许可注册机之13.1注册机
- web-前端之事件冒泡,其中包括(onmousemove,onmouseover,onmouseout,onmouseleave,onmouseup,onmouseentter)可用于一些计数小游戏
- NodeJs的介绍
- ros 下使用3D激光雷达 velodyne vlp-16
- 让我们考虑一个地图引擎系统。。。
- python
- python中__init__()函数的用法
- 表单事件
- 组件化开发之利用SVN搭建私有SpecRepo
- SQL中的每一张表都必须设有主键吗