常见鼠标事件

最新推荐文章于 2023-08-06 20:23:54 发布
最新推荐文章于 2023-08-06 20:23:54 发布
阅读量7.1k 收藏 3
点赞数
分类专栏： javaScript
鼠标触发CSS事件 
说明： 
onMouseDown 按下鼠标时触发 
onMouseOver 鼠标经过时触发 
onMouseUp 按下鼠标松开鼠标时触发 
onMouseOut 鼠标移出时触发 
onMouseMove 鼠标移动时触 
复制代码代码如下:

<html> 
<head> 
<title>CSS 鼠标响应事件</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
.Off{ background-color: #00FF66; padding:100px;} 
.up{background-color: #FF0000; padding:100px} 
</style> 
</head> 
<body> 
<ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'"> 
<h4>鼠标响应事件 当鼠标经过移出时切换css</h4> 
<li>onMouseDown 按下鼠标时触发 
<li>onMouseOver 鼠标经过时触发 
<li>onMouseUp 按下鼠标松开鼠标时触发 
<li>onMouseOut 鼠标移出时触发 
<li>onMouseMove 鼠标移动时触发 </li> 
</ul> 
</body> 
</html> 

复制代码代码如下:

<span style="color: red;">鼠标经过表格变色样式:<br></span> 

复制代码代码如下:

<style> 
table { background-color:#000000; cursor:hand; width:100%; } 
td { 
/*设置onmouseover事件*/ 
onmouseover: expression(οnmοuseοver=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'}); 
/*设置onmouseout事件*/ 
onmouseout: expression(οnmοuseοut=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''}); 
background-color:#ffffff; 
} 
</style> 
控制表格隔行变色: 
简单应用: 
<style type="text/css"> 
<!-- 
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} 
--> 
高级应用:每个单元格变色 
<style type="text/css"> 
<!-- 
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")} 
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))} 
--> 
</style> 

添加CSS文件引用: 


复制代码代码如下:

<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" /> 
常见的有以下8个： 
mousedown：鼠标的键钮被按下。 
mouseup：鼠标的键钮被释放弹起。 
click：单击鼠标的键钮。 
dblclick：鼠标的键钮被按下。 
contextmenu ：弹出右键菜单。 
mouseover：鼠标移到目标的上方。 
mouseout：鼠标移出目标的上方。 
mousemove：鼠标在目标的上方移动。 
mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。 
 
<script type="text/javascript"> 
var loadEvent = function(fn) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 
var checkevents = function(){ 
var demo = document.getElementById("mouse"); 
var ex = document.getElementById("explanation"); 
demo.onclick = function(){ 
ex.style.display = "block"; 
ex.innerHTML += "click<br>" 
} 
demo.ondblclick = function(){ 
ex.style.display = "block"; 
ex.innerHTML += "dblclick<br>" 
} 
demo.onmouseup = function(){ 
ex.style.display = "block"; 
ex.innerHTML += "mouseup<br>" 
} 
demo.onmousedown = function(){ 
ex.style.display = "block"; 
ex.innerHTML += "mousedown<br>" 
} 
demo.oncontextmenu = function(){ 
ex.style.display = "block"; 
ex.innerHTML += "contextmenu<br>" 
} 


} 
var clearcontent = function(){ 
var reset = document.getElementById("clearcontent"); 
var ex = document.getElementById("explanation"); 
reset.onclick = function(){ 
ex.innerHTML = ''; 
ex.style.display = "none"; 
} 
} 
loadEvent(function(){ 
clearcontent(); 
checkevents(); 
}) 
</script> 
<div id="mouse" style="width:500px;height:200px;background:#E8FFE8;border:2px solid #336699;"> 
请在这里点击，测试一个点击到底捆绑了多少种鼠标事件？！ 
</div> 
<p><button type="button" id="clearcontent">清空</button></p> 
<div id="explanation" style="width:500px;border:2px solid #336699;display:none;"></div> 
===============================================================
事件 浏览器支持 描述
onClick HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 鼠标双击事件
onMouseDown HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 鼠标上的按钮被按下了
onMouseUp HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 鼠标按下后，松开时激发的事件
onMouseOver HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 鼠标移动时触发的事件
onMouseOut HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N3 | O3		 当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件 浏览器支持 描述
onAbort HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N3 | O		 图片在下载时被用户中断
onBeforeUnload HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N | O		 当前页面的内容将要被改变时触发的事件
onError HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N3 | O		 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove HTML: 2 | 3 | 3.2 | 4 
Browser: IE | N4 | O		 浏览器的窗口被移动时触发的事件
onResize HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N4 | O		 当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N | O		 浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 2 | 3 | 3.2 | 4 
Browser: IE5 | N | O		 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 当前页面将被改变时触发的事件
表单相关事件
事件 浏览器支持 描述
onBlur HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 当某个元素获得焦点时触发的事件
onReset HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N3 | O3		 当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 2 | 3 | 3.2 | 4 
Browser: IE3 | N2 | O3		 一个表单被递交时触发的事件
滚动字幕事件
事件 浏览器支持 描述
onBounce HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N | O		 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N | O		 当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 2 | 3 | 3.2 | 4 
Browser: IE4 | N | O		 当Marquee元素开始显示内容时触发的事件

逸少KevinLM
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 鼠标事件总结
12-02
常见的有以下8个： mousedown：鼠标的键钮被按下。 mouseup：鼠标的键钮被释放弹起。 click：单击鼠标的键钮。 dblclick：鼠标的键钮被按下。 contextmenu ：弹出右键菜单。 mouseover：鼠标移到目标的上方。 mouseout：鼠标移出目标的上方。 mousemove：鼠标在目标的上方移动。 mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。 请在这里点击，测试一个点击到底捆绑了多少种鼠标事件？！ 清空 [C
JavaScript常见鼠标事件与用法分析
12-02
本文实例讲述了JavaScript常见鼠标事件与用法。分享给大家供大家参考，具体如下： JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下。 mouseup 鼠标的键钮释放弹起。 click 鼠标左键（或中键）被单击。 事件触发顺序是：mousedown -> mouseup -> click dblclick 鼠标左键（或中键）被双击。 事件触发顺序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。 contextmenu 弹出右键菜单，它可能是鼠标右键触发的，
鼠标事件的种类：
11-03 1071
click：用户单击左键时发生（单击右键不会发生）。如果焦点在一个按钮上，并按下回车键，也会触发该事件。 dbclick：用户双击鼠标左键时发生（双击右键时不会发生）。 mousedown：用户按下任一个鼠标按键时发生。用事件对象的 button 属性可以获得按下的按键。 mouseup：用户松开一个鼠标按键时发生。用事件对象的 button 属性可以获得按下的按键。 mouseover：
前端基础
stone_ui的博客
10-09 282
目录 面向对象与面向过程的本质的区别 HTML超文本标记语言 CSS 兼容性 引入方式： Javascript 数据类型 事件 正则表达式 this指针 ES6 框架 面向对象与面向过程的本质的区别 https://blog.csdn.net/jerry11112/article/details/79027834 HTML超文本标记语言 网站后缀 html\s...
JavaScript鼠标移动事件及案例
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
前端常见的事件，案例源码html+css+js
qq_42754222的博客
07-13 662
前端常见事件
Web前端 | JavaScript（事件）
m0_61933976的博客
10-17 2797
Web前端 | JavaScript（事件）
javascript事件列表解说
gx_xiaon的专栏
02-23 914
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2
鼠标的移入、移出事件
06-15 1万+
① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发mouseover（或mouseout）事件② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发mouseenter（或mouseleave）事件。
关于js中的鼠标事件总结
12-12
js中鼠标事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的这些事件都包含有一个事件对象event，当然在IE低版本下，event对象是挂在window底下的。这个我们另行讨论。 1.通过html添加...
JavaScript Event学习第九章 鼠标事件
10-29
鼠标事件是到目前为止最重要的事件。在这一章我将介绍一些鼠标事件的最常见的问题和技巧。
鼠标常用的事件
zhj1329000的博客
03-24 908
onmouseover: 鼠标移入事件(可以触发冒泡)onmouseout: 鼠标移出事件(可以触发冒泡)onmouseenter: 鼠标移入事件(不会触发冒泡)onmouseleave: 鼠标移出事件(不会触发冒泡)onfocus: 获取鼠标焦点事件。onclick: 鼠标点击事件。onblur: 失去鼠标焦点。onmouseup: 鼠标弹起触发。onmousedown: 鼠标按下触发。onmousemove: 鼠标移动事件。
前端常见的几个事件
m0_51262858的博客
09-07 1197
简述Javascript的几个常见事件，以及绑定的方式
前端js中的onclick点击事件
热门推荐
个人笔记
03-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 50px; background-color: skyblue; margin: 40px; } </style>
Web API之鼠标事件
Zhang_YingJie的博客
03-14 964
关于事件的监听，我们可以通过进行监听或者通过元素的属性来指定。接下来的所有事件都可以通过上面两种方式注册。事件的捕获与冒泡 ，现在默认都是冒泡阶段注册事件处理程序。
鼠标移动事件
m0_65511328的博客
03-27 4777
在学习JS中，我对鼠标移动事件进行了一些总结，需要的可以作参考（仅供参考）。 要点总结： 第一:onmousemove属性在鼠标指针移动到元素时触发，如图： 第二：用querySelectorAll 来获取全部事件 //querySelectorAll 获取全部事件 var变量= document.querySelectorAll("#id"); 第三：clientX和clientY 用于获得鼠标当前的可见窗口的坐标，div的偏...
Qt实现鼠标双击事件
qq_53704583的博客
07-22 2949
Qt双击事件的实现
javascript学习之鼠标事件
白话机器学习
08-06 2444
WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。目前，鼠标滚轮相关的事件只有一个wheel事件，用户滚动鼠标的滚轮，就生成这个事件的实例。浏览器原生提供构造函数，用来生成WheelEvent实例。构造函数可以接受两个参数，第一个是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是wheel。第二个参数是事件的配置对象。该对象的属性除了EventUIEvent的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。deltaX。
前端开发中常见的鼠标事件
weixin_44628177的博客
07-23 2244
1.onclick 鼠标点击左键触发 2.onmouseover 鼠标经过触发 3.onmouseout 鼠标离开触发 4.onfocus 获得鼠标焦点触发 5.onblur 失去鼠标焦点触发 6.onmousemove 鼠标移动触发 7.onmouseup 鼠标弹起触发 8.onmousedown 鼠标按下触发 ...
openlayers鼠标事件
最新发布
10-15
其中一些常见的鼠标事件包括： 1. 单击事件（click）：当用户点击地图时触发。可以通过监听这个事件来执行自定义的操作，例如显示信息窗口或添加标记。 2. 双击事件（dblclick）：当用户双击地图时触发。与单击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值