前端JavaScript

复习笔记之API(8) 鼠标事件&&键盘事件

2020-04-18  本文已影响0人  晚月川

常用的鼠标事件补充

contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

// 禁用右键菜单 contextmenu
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})
// 禁止选中文字 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 某个键盘按键被按下时 触发 (但它不识别功能键ctrlshift箭头等)
// 常用的键盘事件
// 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值

onkeydownonkeyup不区分字母大小写,onkeypress区分字母大小写。实际开发中,我们更多的使用keydownkeyup,它们能识别所有的键(包括功能键),keypress不能识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值

上一篇下一篇

猜你喜欢

热点阅读