复习笔记之API(8) 鼠标事件&&键盘事件
2020-04-18 本文已影响0人
晚月川
常用的鼠标事件补充
- 禁止鼠标右键菜单
contextmenu
主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
// 禁用右键菜单 contextmenu
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
- 禁止鼠标选中(
selectstart
开始选中)
// 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
鼠标事件对象
event
对象代表事件的状态,跟事件相关的一系列信息的集合
MouseEvent
鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX |
返回鼠标相对于浏览器可视窗口的X坐标 |
e.clientY |
返回鼠标相对于浏览器可视窗口的Y坐标 |
e.pageX |
返回鼠标相对于文档页面的X坐标 IE9以上支持 |
e.pageY |
返回鼠标相对于文档页面的Y坐标 IE9以上支持 |
e.screenX |
返回鼠标相对于电脑屏幕的X坐标 |
e.screenY |
返回鼠标相对于电脑屏幕的Y坐标 |
// 鼠标事件对象
document.addEventListener('click', function(e) {
// client 鼠标在可视区域的x坐标和y坐标
console.log(e.clientX);
console.log(e.clientY);
// page 鼠标在页面文档的x坐标和y坐标
console.log(e.pageX);
console.log(e.pageY);
// screen 鼠标相对于电脑屏幕的x坐标和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
常用的键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup |
某个键盘按键被松开时触发 (按键弹起时触发) |
onkeydown |
某个键盘按键被按下时触发 |
onkeypress |
某个键盘按键被按下时 触发 (但它不识别功能键ctrl 、shift 、箭头 等) |
// 常用的键盘事件
// keyup 按键弹起的时候触发
// 传统注册方式
document.onkeyup = function() {
console.log('按键弹起');
}
// 事件监听方式(建议使用以后都使用这种方法)
document.addEventListener('keyup', function() {
console.log('按键弹起');
})
// keydown 按键按下的时候触发(按下键触发,一直按着一直触发)
document.addEventListener('keydown', function() {
console.log('按键按下keydown');
})
// keypress 按键按下的时候触发
document.addEventListener('keypress', function() {
console.log('按键弹起keypress');
})
- 如果使用
addEventListener
不需要加on
onkeypress
和前面两个的区别是它不能识别功能键,比如左右箭头
、shift
等- 三个事件的执行顺序:
keydown => keypress => keyup
键盘事件对象
KeyboardEvent
键盘事件对象
// 键盘事件对象中的keyCode属性可以得到相应的键的ASCII码值
document.addEventListener('keyup', function(e) {
// console.log(e);
console.log(e.keyCode);
// keyup和keydown事件不区分大小写 a和A得到的都是65
})
document.addEventListener('keypress', function(e) {
console.log(e.keyCode);
// keypress事件区分字母大小写 a返回97 A返回65
})
// 我们可以利用keyCode返回的ASCII值判断用户按下了哪个键
键盘事件对象(属性) | 说明 |
---|---|
keyCode |
返回该键的ASCII值 |
onkeydown
和onkeyup
不区分字母大小写,onkeypress
区分字母大小写。实际开发中,我们更多的使用keydown
和keyup
,它们能识别所有的键(包括功能键),keypress
不能识别功能键,但是keyCode
属性能区分大小写,返回不同的ASCII值