使用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传给该方法
随机推荐
- 201521123023《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 分析:该方法实现了ArrayList数组的遍历,从而确定所查内容是否存在 1 ...
- 201521123085 《Java程序设计》 第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123004《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 答:思维导图如下: Java中使用try-catch语法处理异常: try { 可能产生异常的代码段 }catch ...
- 201521123103 《java学习笔记》 第十周学习总结
一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 二.书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学 ...
- vim基础详解
目录: 什么是vim Vim能做什么 如何学习vim 如何用vim打开一个文件 Vim的三种模式 插入模式 命令模式 扩展命令模式 光标移动 在命令模式下 删除,复制,粘贴 扩展命令模式 可视化模式 ...
- Hibernate中fetch和lazy介绍
fetch ,指定关联对象抓取的方式,可以设置fetch = "select" 和 fetch = "join".select方式时先查询返回要查询的主体对象( ...
- Eclipse dynamic web project 插件
下载了Eclipse Oxygen 发现没有Dynamic web Project 首先我们先了解下Dynamic Web Project If you want to create a c ...
- 在web中使用HTTPS
背景 目前网上流行的是HTTP协议,HTTPS协议还在逐步推广的过程中. HTTP协议以明文发送内容,容易被攻击者窃听.HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份[ ...
- SQL语言知识点总结
1.DQL.DML.DDL.DCL的概念与区别 一.SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下: 1974年- ...
- Ubuntu16.04.1安装JDK1.8.0
今天在安装Zookeeper的时候需要安装JDK,对于.Neter来说还是有点陌生,下面我就把安装JDK的步骤记录一下,分享给大家. 一.下载JDK安装包:http://www.oracle.com/ ...