使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup
2024-08-26 03:19:08
一,
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
一个小例:鼠标未在上面前 移到上面后
(1)关键代码
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
(2)关键代码 (两种方法均可实现)
<div onmouseover="innerHTML='谢谢'" onmouseout="innerHTML='把鼠标移到上面'"
style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
二,
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
例:
未按鼠标前点击鼠标时松开后
(1)关键代码
<div onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;color:#ffffff;
width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div> <script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
} function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
(2)关键代码 (两种方法均可)
<div onmousedown="style.backgroundColor='#1ec5e5',innerHTML='请释放鼠标'"
onmouseup="style.backgroundColor='red',innerHTML='请按下鼠标'"
style="color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
最新文章
- MyBatis源码分析(5)——内置DataSource实现
- Android中ExpandableListView的使用
- const用法小结
- Oracle 数据库日常巡检
- JavaScript 导出Excel 代码
- zookeeper3.4.6的安装
- [转]vim常用命令
- [codevs3295]落单的数
- dedecms 文章排列方式
- 图解MapReduceMapReduce整体流程图
- tracker-store and tracker-miner-fs eating up my CPU on every startup
- HDU2007-平方和与立方和
- easyui-combobox select 设置不分行(只显示在一行)
- Windows上Ruby开发环境的配置
- 3 Redis 的常用五大数据类型
- Expm 10_1 带负权值边的有向图中的最短路径问题
- obv15 实例6:如果K线柱过多,ZIG将发生变动,导致明显的OBV15指标被隐藏!
- Nginx配置基于ip的虚拟主机
- const对象,指向const对象的指针 和 const 指针
- 让iframe可编辑
热门文章
- 201521123070 《JAVA程序设计》第8周学习总结
- 201521123044 《Java程序设计》第2周作业-Java基本语法与类库
- eclipse:eclipse for java EE环境下如何配置tomcat服务器,并让tomcat服务器显示在控制台上,将Web应用部署到tomcat中
- Fabric 1.0的多机部署
- Java+大数据开发——HDFS详解
- lintcode.44 最小子数组
- Eclipse-远程调试服务器代码
- java最全时间类及用法
- Azure SQL Database (24) 使用新管理界面,创建跨数据中心标准地域复制(Standard Geo-Replication)
- extract-text-webpack-plugin打包css后出现图片引用路径不对问题