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

常用的鼠标事件补充

• 禁止鼠标右键菜单

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

// 禁用右键菜单 contextmenu
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

• 禁止鼠标选中(selectstart 开始选中)

// 禁止选中文字 selectstart 
document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合

• MouseEvent鼠标事件对象

// 鼠标事件对象
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);
})

常用的键盘事件

// 常用的键盘事件
// 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值判断用户按下了哪个键

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