(93)Wangdao.com_第二十六天_鼠标事件
鼠标事件
与鼠标相关的事件，继承了 MouseEvent 接口
- 分类：
click 按下鼠标（通常是按下主按钮）时触发。 mousedown 首先触发，mouseup 接着触发，click 最后触发
dblclick 在同一个元素上双击鼠标时触发。 在mousedown、mouseup、click 之后触发 dbclick
mousedown 按下鼠标键时触发。
mouseup 释放按下的鼠标键时触发。
mousemove 当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
mouseenter 鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
mouseleave 鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
mouseover 鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
mouseout 鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
contextmenu 按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
wheel 滚动鼠标的滚轮时触发，该事件继承的是 WheelEvent 接口。
- 鼠标相关的动作，所产生的事件对象都是 MouseEvent 实例。
- 此外，滚轮事件和拖拉事件也是 MouseEvent 实例 MouseEvent 接口继承了 Event 接口，所以拥有 Event 的所有属性和方法。 它还有自己的属性和方法
var event = new MouseEvent(eventType, options);
options 除了Event 接口的实例配置属性，该对象可以配置以下属性，所有属性都是可选的
screenX 数值 鼠标相对于屏幕的水平位置（单位像素），默认值为 0，设置该属性不会移动鼠标。
screenY 数值 鼠标相对于屏幕的垂直位置（单位像素），其他与 screenX 相同。
clientX 数值 鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
clientY 数值 鼠标相对于程序窗口的垂直位置（单位像素），其他与 clientX 相同。
ctrlKey 布尔值 是否同时按下了 Ctrl 键，默认值为 false。
shiftKey 布尔值 是否同时按下了 Shift 键，默认值为 false。
altKey 布尔值 是否同时按下 Alt 键，默认值为 false。
metaKey 布尔值 是否同时按下 Meta 键，默认值为 false。
button 数值 表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；
1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
buttons 数值 表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。
1（二进制001）表示按下主键（通常是左键），
2（二进制010）表示按下次要键（通常是右键），
4（二进制100）表示按下辅助键（通常是中间键）。
因此，如果返回3（二进制011）就表示同时按下了左键和右键。
relatedTarget 节点对象 表示事件的相关节点，默认为 null。
mouseenter 和 mouseover 事件时，表示鼠标刚刚离开的那个元素节点；
mouseout 和 mouseleave 事件时，表示鼠标正在进入的那个元素节点。
- MouseEvent 接口的实例属性
// HTML 代码如下
// <body onclick="showKey(event)"> function showKey(e) {
console.log('ALT key pressed: ' + e.altKey);
console.log('CTRL key pressed: ' + e.ctrlKey);
console.log('META key pressed: ' + e.metaKey);
console.log('SHIFT key pressed: ' + e.shiftKey);
};
event.button 返回一个数值，表示事件发生时按下了鼠标的哪个键
0 按下主键（通常是左键），或者该事件没有初始化这个属性（比如mousemove事件）。
1 按下辅助键（通常是中键或者滚轮键）。
2 按下次键（通常是右键）
// HTML 代码为
// <button onmouseup="whichButton(event)">点击</button>
var whichButton = function (e) {
switch (e.button) {
case 0:
console.log('Left button clicked.');
break;
case 1:
console.log('Middle button clicked.');
break;
case 2:
console.log('Right button clicked.');
break;
default:
console.log('Unexpected code: ' + e.button);
};
};
event.buttons 返回一个三个比特位的值，表示同时按下了哪些键。
它用来处理同时按下多个鼠标键的情况。
1 二进制为001（十进制的1），表示按下左键。
2 二进制为010（十进制的2），表示按下右键。
4 二进制为100（十进制的4），表示按下中键或滚轮键。
event.clientX 返回鼠标位置相对于浏览器窗口左上角的水平坐标（单位像素） 只读属性
event.clientY 返回鼠标位置相对于浏览器窗口左上角的垂直坐标 只读属性
event.screenX 返回鼠标位置相对于屏幕左上角的水平坐标（单位像素） 只读属性
event.screenY 返回鼠标位置相对于屏幕左上角的垂直坐标 只读属性
event.movementX 返回当前位置与上一个 mousemove 事件之间的水平距离（单位像素）
event.movementY 返回当前位置与上一个 mousemove 事件之间的垂直距离（单位像素）
- 数值上，它等于下面的计算公式
event.movementX = event.screenX - oldEvent.screenX
event.offsetX 返回 鼠标位置 与 目标节点 border-left 的水平距离（单位像素） 只读属性。
event.offsetY 返回 鼠标位置 与 目标节点 上方的 border-top 的垂直距离 只读属性。
/* HTML 代码如下
<style>
p {
width: 100px;
height: 100px;
padding: 100px;
}
</style> <p>Hello</p>
*/
var p = document.querySelector('p');
p.addEventListener('click', function (e) {
console.log(e.offsetX); // 150
console.log(e.offsetY); // 150
}, false);
event.pageX 返回 鼠标位置 与 网页左侧边缘 的距离（单位像素） 包括网页 scroll 的部分 只读属性
event.pageY 返回 鼠标位置 与 网页上侧边缘 的距离（单位像素） 包括网页 scroll 的部分 只读属性
/* HTML 代码如下
<style>
body {
height: 2000px;
}
</style>
*/
document.body.addEventListener('click', function (e) {
console.log(e.pageX);
console.log(e.pageY);
}, false);
event.relatedTarget 返回事件的相关节点。 对于那些没有相关节点的事件，该属性返回null。 该属性只读
事件名称 target relatedTarget
focusin 接受焦点的节点 丧失焦点的节点
focusout 丧失焦点的节点 接受焦点的节点
mouseenter 将要进入的节点 将要离开的节点
mouseleave 将要离开的节点 将要进入的节点
mouseout 将要离开的节点 将要进入的节点
mouseover 将要进入的节点 将要离开的节点
dragenter 将要进入的节点 将要离开的节点
dragexit 将要离开的节点 将要进入的节点/****
<div id="outer" style=" height:500px;
width:500px;
border:1px solid black;">
<div id="inner" style=" height:250px;
width:250px;
border:1px solid black;"></div>
</div>
****/ window.addEventListener("DOMContentLoaded", function(){
/**** event.relatedTarget ****/
var inner = document.getElementById('inner');
var outer = document.getElementById('outer'); outer.addEventListener('mouseover', function (event) {
console.log('over进入' + event.target.id + ' 离开' + event.relatedTarget.id);
}, false); outer.addEventListener('mouseout', function () {
console.log('over离开' + event.target.id + ' 进入' + event.relatedTarget.id);
}); outer.addEventListener('mouseenter', function (event) {
console.log('enter进入' + event.target.id + ' 离开' + event.relatedTarget.id);
}); outer.addEventListener("mouseleave", function (){
console.log('leave离开' + event.target.id + ' 进入' + event.relatedTarget.id);
}); // 鼠标从 outer 进入inner，输出
// 进入inner 离开outer
// enter进入inner 离开outer // 鼠标从 inner进入 outer，输出
// 离开inner 进入outer
// leave离开inner 进入outer
}, false);- MouseEvent 接口的实例方法
event.getModifierState()
返回一个布尔值，表示有没有按下特定的功能键。它的参数是一个表示功能键的字符串
// 是否按下了 大写 键
document.addEventListener('click', function (e) {
console.log(e.getModifierState('CapsLock'));
}, false);- WheelEvent 接口
继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象
var wheelEvent = new WheelEvent(type, options);
第一个参数是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是 "wheel"
第二个参数是事件的配置对象。
- 该对象的属性除了 Event、UIEvent 的配置属性以外，还可以接受以下几个属性，所有属性都是可选的
deltaX 表示滚轮的水平滚动量，默认值是 0.0。
deltaY 表示滚轮的垂直滚动量，默认值是 0.0。
deltaZ 表示滚轮的 Z 轴滚动量，默认值是 0.0。
deltaMode 表示相关的滚动事件的单位，适用于上面三个属性。
0 表示滚动单位为像素，1 表示单位为行，2 表示单位为页，默认为 0
event.deltaX 表示滚轮的水平滚动量
event.deltaY 表示滚轮的垂直滚动量
event.deltaZ 表示滚轮的 Z 轴滚动量
event.deltaMode 表示上面三个属性的单位，0是像素，1是行，2是页
(93)Wangdao.com_第二十六天_鼠标事件的更多相关文章
- (94)Wangdao.com_第二十七天_键盘事件
键盘事件 键盘事件由用户击打键盘触发 主要有 keydown.keyup .keypress三个事件,它们都继承了 KeyboardEvent 接口. keydown 按下键时 触发 ...
- (96)Wangdao.com_第二十九天_表单事件
表单事件 input 事件 select 事件 change 事件 invalid 事件 reset 事件 submit 事件 ...
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- javaSE第二十六天
第二十六天 414 1:网络编程(理解) 414 (1)网络编程:用Java语言实现计算机间数据的信息传递和资源共享 414 (2)网络编程模型 414 (3)网络编程的三要素 ...
- IT第二十六天 - Swing、上周总结
IT第二十六天 上午 Swing 1.对于方法的参数如果是int数值类型,应该直接调用该类中的常量属性,而不应该直接填入数字 2.Toolkit类中定义的方法是可以直接访问本地计算机(操作系统)信息的 ...
- Python第二十六天 python装饰器
Python第二十六天 python装饰器 装饰器Python 2.4 开始提供了装饰器( decorator ),装饰器作为修改函数的一种便捷方式,为工程师编写程序提供了便利性和灵活性装饰器本质上就 ...
- 孤荷凌寒自学python第二十六天python的time模块的相关方法
孤荷凌寒自学python第二十六天python的time模块的相关方法 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 要使用time模块的相关方法,必须在文件顶端引用: import tim ...
- (97)Wangdao.com_第三十天_触摸事件
触摸事件 只有触摸屏才会引发这一类事件 触摸事件 和 鼠标事件 同时触发,即使这个时候并没有用到鼠标. 这是为了让那些只定义鼠标事件.没有定义触摸事件的代码,在触摸屏的情况下仍然能用. 如果想避免这种 ...
- linux基础-第二十单元_计划任务crond服务
第二十单元 计划任务crond服务 什么是计划任务:后台运行,到了预定的时间就会自动执行的任务,前提是:事先手动将计划任务设定好.这就用到了crond服务 crond服务相关的软件包[root@MiW ...
随机推荐
- Word中页眉、页码设置
本篇博文简单介绍一下文档中页眉.页码设置的问题 一个项目中,封面一般不需要页眉,要关闭首页的页眉,可以在"页眉和页脚工具->选项->首页不同"可以如下设置: 图 1关闭 ...
- SSH HTTP代理
SSH 连接 参照https://stackoverflow.com/questions/19161960/connect-with-ssh-through-a-proxy 若要使用goflyway连 ...
- densenet 中的shortcut connection
DenseNet 在FCN 网络中考虑加入skip connection,在resnet 中加入identity 映射,这些 shortcut connection等结构能够得到更好的检测效果,在d ...
- idea+maven+ssm搭建boot_crm项目遇到的问题
使用idea+maven+ssm搭建一个boot_crm项目,遇到的问题如下: 1.环境搭建好了,相关配置文件都配置好了,也部署到了tomcat,但是无法启动首页. 通过百度,google找到了,原因 ...
- cvc-complex-type.2.4.a: Invalid content was found starting with element 'asy
- 使用tablayout和recyclerview的时候,报重复添加Fragment错误
原因: 在添加的子Fragment报错了, 出现了空值错误, 此时报出来错误是前一个Fragment重复添加
- mysql 原理 ~ 并行复制
一 概念1 MTS(Prepared transactions slave parallel applier) 主库在同一时间进入prepare状态的事务可以被从库并行回放2 传统与改进 ma ...
- Django之Cookie和Session
http://www.cnblogs.com/liwenzhou/p/8343243.html 一.Cookie Cookie是什么? 就是保存在客户端浏览器上的键值对. Cookie为什么存在? 因 ...
- 史上最明白的 NULL、0、nullptr 区别分析（老师讲N篇都没讲明白的东东），今天终于明白了，如果和我一样以前不明白的可以好好的看看...
C的NULL 在C语言中,我们使用NULL表示空指针,也就是我们可以写如下代码: int *i = NULL; foo_t *f = NULL; 实际上在C语言中,NULL通常被定义为如下: #def ...
- 【原创】大数据基础之Zookeeper（3）选举算法
提到zookeeper选举算法,就不得不提Paxos算法,因为zookeeper选举算法是Paxos算法的一个变种: Paxos要解决的问题是:在一个分布式网络环境中有众多的参与者,但是每个参与者都不 ...