使用HTML DOM 来分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup
一，
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>
使用HTML DOM 来分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup的更多相关文章
- JavaScript之DOM操作，事件操作，节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- 【使用 DOM】使用事件
1. 使用简单事件处理器 可以用几种不同的方式处理事件.最直接的方式是用事件属性创建一个简单事件处理器(simple event handler).元素为它们支持的每一种事件都定义了一个事件属性.举个 ...
- 前端学习(二十三）DOM操作，事件（笔记）
javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文 ...
- JavaScript的基础语法及DOM元素和事件
一,JavaScript是什么? 1,JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行.主要用来实现网页的动态效果,用户交互及前后端的数据传输等. 2,J ...
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系
hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件
在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件 当触发事件时候 会把当前的dom传给该方法
随机推荐
- mysql外键设置选项
. cascade方式 在父表上update/delete记录时,同步update/delete掉子表的匹配记录 . set null方式 在父表上update/delete记录时,将子表上匹配记录的 ...
- 201521123015 《Java程序设计》第4周学习总结
本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.多态:使用单一接口操作多种类型的对象. 2.private修饰属性,public修饰方法. 3 ...
- 201521123015 《Java程序设计》第3周学习总结
本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点. 书面作业 Q1.代码阅读 publi ...
- 201521123108《Java程序设计》第12周学习总结
1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. Q ...
- 参加IMWebConf 2017 前端开发者大会是什么体验？
周六作为特邀讲师之一参加了IMWebConf 2017 前端开发者大会的主题演讲,主题为<WebAssembly:面向未来的web开发技术>.本次大会质量非常高,来自国内外的技术专家带了很 ...
- delphi引用别的单元时问题
当需要添加别的工程总的unit文件时,将unit的pas文档放入工程目录下,在工程页面Uses添加 Unit2 in 'Unit2.pas' {DataModule2: TDataModule}, U ...
- 运算符（C# 参考）
reference:https://msdn.microsoft.com/zh-cn/library/zkacc7k1(v=vs.140).aspx
- MongoDB 所支持的数据类型 创建和删除集合 创建和删除数据库
数据类型 MongoDB 支持如下数据类型: String:字符串.存储数据常用的数据类型.在 MongoDB 中,UTF-8 编码的字符串才是合法的. Integer:整型数值.用于存储数值.根据你 ...
- 云计算之阿里仓库停止openstack mitaka源报错“No package centos-release-openstack-mitaka available.”
之前学习了一个月的openstack的mitaka版本,写完脚本放置一段时间,最近准备正式部署突然发现 No package centos-release-openstack-mitaka avail ...
- [Node.js] 2、利用node-git-server快速搭建git服务器
本文用到了node-git-server 1.检测本地git版本 该包的使用需要机器上本来就安装git,且git的版本大于等于2.7: ╭─root@lt /home/workspace ╰─# gi ...