浏览器滑块、鼠标事件、鼠标滑轮、键盘事件详细说明

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Trifling_/article/details/52738301

鼠标滑轮

必须是在 mousewheel 事件中

注册事件   window.addEventListener(mousewheel ,function(){});

 

event.deltaY   获取滑轮没一格滑动的像素,正负表示变化趋势,正增加

event.wheelDeltaY   正表示向上滑动,负表示向下

鼠标位置

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口   

       自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口

        自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x       设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y       设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

浏览器滑动条

  注册事件   window.addEventListener(scroll,function(){});

  window.pageYOffset   获取当前页面相对于窗口显示区左上角的位置, 即滑块距文档顶端位置,IE8之前不支持

  document.body.scrollTop   也是同样的功能,滑块位置,兼容ie

  document.body.clientHeight  获取body对象高度

  document.body.scrollHeight   获取body可滚动高度,但有最小值(即是浏览器可视化高度),与document.documentElement.scrollHeight  类似,唯一区别就是最小值

body.scrollHeight与documentElement.scrollHeight区别:

    当高度大于浏览器可视化高度时,两个值相等,否则body就是浏览器可视化高度,documentElement显示真实高度

  document.documentElement.clientHeight  获取可视化对象高度,即是当前浏览器显示文档区域的高度,浏览器缩小,它也就变小

document.documentElement.scrollHeight  获取document文档的高度,为真实高度

clientHeight与scrollHeight区别:clientHeight显示当前对象的可显示真实高度(不包括浮动、绝对定位等脱离文档流元素高度,scrollHeight是当前整个对象可滑动的高度(包括里面的脱离文档流高度)

鼠标按键检测

必须是在 mousedownmouseupmousemove 事件中

event.button 0|1|2 ,分别表示鼠标左键、中、右

event.which   键值的ascii

特殊键检测

event.altKey  检测事件发生时Alt键是否被按住了  true表示按下并保持

event.ctrlKey   event.shiftKey   同理

事件机制

event.cancelable    取消默认事件  preventDefault()一样

event.cancelBubble  取消冒泡事件  event.stopPropagation()

event.srcElement    事件发生源

event.target        事件发生源

event.currentTarget  事件发生冒泡到该当前元素

event.path         返回数组  事件冒泡路径,当前节点、bodyhtmldocumentwindow,     

                   FF没有该属性,注意兼容性

event.timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间(从 epoch 开始的毫秒数)。epoch 是一个事件参考点。在这里,它是客户机启动的时间。

键盘事件

要触发键盘事件,鼠标必须要获取光标(div,就必须设置为可编辑状态,document默认支持),keydown keypresskeyup

KeyPress 只能捕获单个字符

KeyDown KeyUp 可以捕获组合键

 

event.key   那个按键 字符, 对应键盘上的字符

event.code  返回  key +字符,非26个字母就返回 键盘对应字符与key一样,数字特殊

event.keyCode 字符对应的ascii ,event.which主要是用于非键盘事件

键盘按下不放时:不断触发keydownkeypress,只触发键盘释放的那一次keyup,

当按下一个键不放的同时按下另一个键,则之前的keydown事件会释放,不在执行。

组合按键:针对ctrlaltshiftkey最好使用keyup来监听,(keydown会因为之前按钮的按下一直执行监听,影响效率) event.ctrlkkey&&event.keyCode==83 监听ctrl+s,

还需注意键盘默认的组合事件,在需要的时候preventDefault()


推荐一篇博客,详细介绍键盘事件   http://www.cnblogs.com/manongxiaobing/archive/2012/11/05/2755412.html

猜你喜欢

转载自blog.csdn.net/Trifling_/article/details/52738301