每日分享！JavaScript的鼠标事件（11个事件）
鼠标的11个事件
具体的事件解释如下：
- click：按下鼠标（通常是按下主按钮）时触发。
- dblclick：在同一个元素上双击鼠标时触发。
- mousedown：按下鼠标键时触发。
- mouseup：释放按下的鼠标键时触发。
- mousemove：当鼠标在一个节点内部移动时触发。当- 鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
- mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
- mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
- mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
- mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
- contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
- wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
margin: 30px;
width: 100px;
height: 100px;
background-color: red;
}
h4 {
color: #fff;
margin: 0;
padding: 0;
}
.box {
margin: 20px;
width: 30px;
height: 30px;
background-color: pink;
}
</style>
</head>
<button id="btn1">click</button>
<button id="btn2">dblclick</button>
<button id="btn3">mousedown</button>
<button id="btn4">mouseup</button>
<div id="btn6">
<h4>mouseenter</h4>
<h4>mouseover</h4>
<div class="box"></div>
</div>
<div id="btn7">
<h4>mouseout</h4>
<div class="box"></div>
</div>
<div id="btn8">
<h4>mouseleave</h4>
<div class="box"></div>
</div>
<div id="btn9">
<h4>contextmenu</h4>
<div class="box"></div>
</div>
<body>
<script>
// 事件1 click ： 按下鼠标即可以触发
btn1.addEventListener('click', function () {
alert('click')
})
// 事件2 dblclick : 双击鼠标可以触发事件 notice: 是dblclick
btn2.addEventListener('dblclick', function () {
alert('dbclick')
}, { once: true }) // 加啦once 只会触发一次。。。
// 事件3 mousedown 按下鼠标键时触发 notice:此时我们监听的是对于按钮按下鼠标键才会触发
btn3.addEventListener('mousedown', function () {
alert('mousedown')
})
// 事件4 mouseup // 点击按钮释放鼠标键时才会触发
btn4.addEventListener('mouseup', function () {
alert('btn-mouseup')
})
// 事件4 mouseup // 释放鼠标键时将会触发 那就绑定为document的全局事件
document.addEventListener('mouseup', function () {
alert('mouseup')
}) // notice 在为看来，不要在全局绑定这样的事件，这样的事件一般在函数内去触发
// 事件5 mousemove 鼠标在移动时触发，但是会持续触发。(test 时，也使用去全局触发)
document.addEventListener('mousemove', function () {
// console.log('moving……')
})
// 事件6 鼠标进进入节点的一瞬间会立刻触发，当进入子节点，或者离开时不会触发
btn6.addEventListener('mouseenter', function () {
// console.log('i am comming ^_^')
})
// 事件7 鼠标进入节点会触发这个事件。进入子节点还会触发这个事件
btn6.addEventListener('mouseover', function () {
console.log('i am mouseover')
}) // 注意 这个与mouseenter 相比。会多触发两次 。离开节点进入自节点会触发，离开子节点，进入父级节点还会触发一次
// 事件8 mouseout 鼠标离开节点时触发。当鼠标进入子接点，相当离开父节点，一样会触发该事件。从子节点离开，进入父级节点一样会触发该事件！
btn7.addEventListener('mouseout', function () {
console.log('i am mouseout')
})
// 事件9 mouseleave // 只有在父级节点出去的时候才会触发。不会在子节点中触发
btn8.addEventListener('mouseleave', function () {
console.log('i am mouseleva')
})
// 事件10 contextmenu // 点击右键触发
btn9.addEventListener('contextmenu',function(){
console.log('i am contextmenu')
})
// 事件11 wheel
document.addEventListener('wheel',function(){
console.log('i am mousewheel')
})
</script>
</body>
</html>
总结
- click 事件是指的是，用户在同一个位置完成mousedown动作，在完成mouseup动作。因此呢，执行的顺序分别为，mousedown 首先触发 -后续执行mouseup,然后执行click
- dbclick 事件会在mousedown - mouseup click - 后执行！
- mouseenter 和 mouseover 都是鼠标进入事件触发，但是两者的区别是。前者只触发一次，后者会在子节点上多次触发。
- mouseout mouseleave 都是鼠标离开时候触发。但两者的区别是，前者会在子节点内多次触发。后者只会离开节点时触发。
每日分享！JavaScript的鼠标事件（11个事件）的更多相关文章
- 【转】分享JavaScript监听全部Ajax请求事件的方法
若Ajax请求是由jQuery的$.ajax发起的,默认情况下可以使用 jQuery的Global Ajax Event Handlers监听到Ajax事件,然而我遇到的却是用原生JavaScript ...
- 每日分享！～ JavaScript(拖拽事件）
浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...
- 每日分享！～ JavaScript中面试基础--1，数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别～
javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...
- javascript鼠标双击时触发事件大全
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- IE和Chrome执行javascript对鼠标双击事件的不同响应
最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
随机推荐
- sql server数据字符串分割功能sql
--分割字符串函数 create FUNCTION [dbo].[GetSplitStringValueInIndex] ( ), --要分割的字符串 ), --分隔符号 @index INT --取 ...
- 托管C++线程锁实现
最近由于工作需要,开始写托管C++,由于C++11中的mutex,和future等类,托管C++不让调用(报错),所以自己实现了托管C++的线程锁. 该类可确保当一个线程位于代码的临界区时,另一个线程 ...
- 「速成应用」实在可靠的 微信小程序第三方代理加盟平台公司
小程序,是基于微信平台的一个划时代产品,也就是嵌入到微信里的一个功能丰富.操作简洁的轻应用,不需要下载安装即可使用.不同的小程序,能实现不同的功能.例如,买电影票.餐厅排号.餐馆点菜.查询公交.查询股 ...
- 原生aspx页面如何引用公共js和css
项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用 ...
- 转)ZooKeeper的实现分析
最近在大量看关于Zookeeper的博客,发现一篇讲解ZK实现很详细的博客,特此转载一下: 原博客地址: http://my.oschina.net/zhengyang841117/blog/1866 ...
- PAT1116: Come on! Let's C
1116. Come on! Let's C (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue &quo ...
- capwap学习笔记——初识capwap（四）（转）
2.5.7 CAPWAP传输机制 WTP和AC之间使用标准的UDP客户端/服务器模式来建立通讯. CAPWAP协议支持UDP和UDP-Lite [RFC3828]. ¢ 在IPv4上,CAPWAP控制 ...
- SSM-SpringMVC-27：SpringMVC类型转换之日期类型初步
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本案例是上面的异常和日期类型转换结合的一个小小的Demo 案例开始 1.自定义处理器和处理方法: packag ...
- 使用Coding Pages托管网站
作者:荒原之梦 Coding官网: https://coding.net Coding Pages官网页面: https://coding.net/pages/ 具体过程如下: 1 注册Coding账 ...
- C#实现联通短信Sgip协议程序源码
此程序为中国联通Sgip协议程序接口,适合在中国联通申请了短信发送端口的公司使用. 短信群发已经成为现在软件系统.网络营销等必不可少的应用工具.可应用在短信验证.信息群发.游戏虚拟商品购买.事件提醒. ...