Web前端js中鼠标事件

onmousemove鼠标在某元素上移动

onmouseover鼠标移到某元素之上（事件冒泡）；

onmouseout鼠标移出某元素；

omouseleave鼠标离开某元素；

onmouseenter鼠标移入某元素之上（没有事件冒泡）；

<html><head><meta charset="UTF-8"><title></title><style>div{width: 300px;height: 300px;border: 1px solid black;float: right;margin: 20px 20px;}div p{background-color:darkgray ;color: white;height: 50px;text-align:center;line-height: 50px;}</style><script>var a = 0;var b = 0;var c = 0;var d = 0;var e = 0;//鼠标移动事件function myMove(){a++;var font = document.getElementById("a");//获得font标签对象font.innerHTML = a;}//   鼠标移入事件function myOver(){b++;var font = document.getElementById("b");//获得font标签对象font.innerHTML = b;}//鼠标移出事件function myOut(){c++;var font = document.getElementById("c");//获得font标签对象font.innerHTML = c;}//鼠标移出事件function myLeave(){d++;var font = document.getElementById("d");font.innerHTML = d;}//鼠标移入事件function myEnter(){e++;var font = document.getElementById("e");font.innerHTML = e;}</script></head><body><div οnmοusemοve="myMove()"><font id = "a">0</font><p>onmousemove鼠标移动运行脚本</p></div><div οnmοuseοver="myOver()"><font id="b">0</font><p>onmouseover鼠标移至之上时运行脚本</p></div><div οnmοuseοut="myOut()"><font id="c">0</font><p>onmouseout鼠标移出元素时运行脚本</p></div><div οnmοuseleave="myLeave()"><font id="d">0</font><p>omouseleave鼠标移出</p></div><div οnmοuseenter="myEnter()"><font id="e">0</font><p>onmouseenter鼠标移出</p></div></body>
</html>

Web前端js中鼠标事件相关推荐

java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
如何调试JS中鼠标悬停事件影响的元素？
如何调试JS中鼠标悬停事件影响的元素? 在日常的前端开发中,我们经常要调试许多其他开发者写的网站和代码.此时我们往往会打开浏览器的开发者工具,在 Elements,Console,Network,So ...
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案时间:2017-04-24 来源:web前端开发小赢家作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
web前端 js实现频域水印制作
web前端 js实现频域水印制作傅里叶变换实现频域水印的方法源自https://github.com/zeruniverse/CryptoStego. 调用cryptostego.min.js ...
web前端开发中需要掌握的技术：
web前端开发中需要掌握的技术: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于 ...

Web前端js中鼠标事件

Web前端js中鼠标事件相关推荐

最新文章

热门文章