使用HTML DOM 来分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup

最新推荐文章于 2021-09-08 22:27:17 发布
最新推荐文章于 2021-09-08 22:27:17 发布
阅读量191 收藏 1
点赞数
原文链接：http://www.cnblogs.com/lshdashi/p/7705386.html
版权

一，

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

一个小例：鼠标未在上面前  移到上面后

（1）关键代码
<body>
<div οnmοuseοver="mOver(this)" οnmοuseοut="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 οnmοuseοver="innerHTML='谢谢'" οnmοuseοut="innerHTML='把鼠标移到上面'"
 style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

 二，

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

例：

未按鼠标前点击鼠标时松开后

（1）关键代码
<div οnmοusedοwn="mDown(this)" οnmοuseup="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 οnmοusedοwn="style.backgroundColor='#1ec5e5',innerHTML='请释放鼠标'" 
οnmοuseup="style.backgroundColor='red',innerHTML='请按下鼠标'" 
style="color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

 

转载于:https://www.cnblogs.com/lshdashi/p/7705386.html

weixin_34023982
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
onmouseover（HTML元素）
culi4814的博客
08-13 4494
描述 (Description) The onmouseover attribute is one of the most commonly used event attributes. It captures the moment that a cursor crosses the boundary of an element, moving from outside to inside th...
使用HTML DOM来为HTML分配事件
qq_45772415的博客
07-20 162
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用HTML DOM为元素附加事件触发</title> </head> <body> <p>点击按钮执行showTime()函数</p> <button id ="myBtn">点击</button>
【JavaScript】 HTML DOM 事件
Antelope的博客
12-26 172
JavaScript HTML DOM 事件 HTML 事件属性 如需向 HTML 元素分配 事件，您可以使用事件属性。 实例： &amp;amp;lt;button onclick=&amp;quot;displayDate()&amp;quot;&amp;amp;gt;点这里&amp;amp;lt;/button&amp;amp;gt; 使用 HTML DOM 来分配事件 HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配
html onmouseover 注释掉,HTML onmouseover事件用法及代码示例
weixin_30744725的博客
06-22 998
将鼠标指针移到元素或其子元素上时，将发生HTML中的DOM onmouseover事件。用法:在HTML中：在JavaScript中：object.onmouseover = function(){myScript};在JavaScript中，使用addEventListener()方法：object.addEventListener("mouseover", myScript);例：DOM on...
onmouseover事件的用法
01-20 1073
当鼠标   onmouseover   一个时，怎么改变td里面的控件属性，比如（背景，字体颜色） 1234
HTML DOM 事件.pdf
06-15
- **`onmouseover`** 和 **`onmouseout`**：分别在鼠标进入和离开元素时触发。类似于 `onmouseenter` 和 `onmouseleave`，但不捕获子元素。 - **`onmouseup`**：鼠标按键被松开时触发。常与 `onmousedown` 配合使用...
html text的常用事件和方法详细描述
09-28
在实际的Web开发过程中，了解这些事件和方法能够让我们更有效地编写JavaScript代码来处理用户的交互动作，并对页面元素进行动态的控制。通过熟练掌握这些基本的知识点，开发者能够设计出用户体验更加流畅的网页应用...
DOM基础教程之事件类型
09-03
在示例代码中，展示了`onmousedown`(鼠标按下)，`onmouseover`(鼠标移入)，`onmouseup`(鼠标抬起)，`onmouseout`(鼠标移出)和`onclick`(鼠标单击)以及`ondblclick`(鼠标双击)这几种常见事件。`button`属性用于识别...
WEB开发 之 JavaScript HTML DOM 事件.docx
09-26
6. **鼠标事件**：`onmouseover`和`onmouseout`事件在鼠标指针进入或离开元素时触发，常用于创建悬停效果。另外，`onmousedown`、`onmouseup`和`onclick`构成了完整的鼠标点击事件链。`onmousedown`在鼠标按钮按下时...
Android触摸事件和mousedown、mouseup、click事件之间的关系
01-06
标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，...
js的dom操作,onmouseover事件,onmouseleave事件,定时器
weixin_43447266的博客
09-08 833
样式 onmouseover鼠标放上改变触发事件 onmouseleave鼠标离开改变触发事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type = "text/css"> #box{ width: 200px; height: 200px; background-col
HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解
Alan_Lowe
08-18 1294
HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick 1.onmouseover和onmouseout 根据单词的意思就可以看出这两个属性是鼠标悬停在元素上方和鼠标离开元素的意思，实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>悬停和点击</title>
JavaScript HTML DOM 事件 onchange onmouseover onmouseout
u011333814的专栏
03-08 1169
onchange 事件会在域的内容改变是发生 支持该事件的标签 ,, function upperCase(x) { var y = document.getElementById(x).value; document.getElementById(x).value = y.toUpperCase(); } 输入您的姓名：
HTML使用onmouseover属性更改背景颜色
qq_43067585的博客
06-12 3002
HTML如何使用onmouseover属性更改背景颜色？下面本篇文章就来给大家介绍一下在HTML中使用onmouseover属性更改背景颜色的方法，希望对大家有所帮助。 HTML的onmouseover属性在鼠标指针移动到元素上时触发。【推荐：html在线手册】 语法： <element onmouseover="script"> 在onmouseover属性内使用document.bgColor来设置背景颜色。 bgColor可获取/设置当前文档的背景颜色 语法： .
DOM——02（获取元素；onmouseover和onmouseout、onfocus和onblur事件；案例2）
Galaksen的博客
08-05 850
目录 1.列表高亮显示(onmouseover和onmouseout 事件) 2.显示和隐藏二维码 3.根据name属性值获取元素(仅针对表单元素,表单元素才有name属性) 4.根据类样式的名字(class属性值)获取元素 5.获取元素的其他方式(根据选择器) 6.*总结获取元素的方式(*为使用频率较高的) 7.div高亮显示 8.模拟搜索框(onfocus和onblur事件) ...
onmouseover和onmouseout事件小结
热门推荐
brokenkay的博客
06-30 1万+
前言 onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明 我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...
HTML DOM Event对象中onmousedown与模拟鼠标事件
Shellerine的专栏
05-11 3795
刚开始疑惑已经有了onmousedown等事件，为什么还要大费周章的模拟鼠标事件呢。 因为它们的触发是不同的，前者是人为触发的，用户出发的；后者是写js代码来触发的，用户不用操作鼠标就能触发鼠标事件。 <img src="/i/example_mouse2.jpg" onmousedown="alert('You clicked the picture!')" />//这个是
JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
u014644574的博客
11-17 1262
1.事件属性如下：
DOM 事件（鼠标事件）
lord_of_war的博客
09-06 1250
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行。 鼠标事件 onclick 事件 onclick 事件会在元素被点击时发生。 <p>单击按钮触发函数。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> function myFunction(){ documen
JavaScript进阶：BOM与DOM操作及事件处理
"JavaScript进阶，包括BOM（Browser Object Model）和DOM（Document Object Model）的使用，以及JS事件的处理。" JavaScript是一种广泛应用于Web开发的脚本语言，主要在浏览器环境中运行，用于增强用户体验和网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值