鼠标及键盘事件

鼠标及键盘事件

一、任务目标

掌握常用鼠标事件

掌握常用键盘事件及键盘事件属性

二、任务背景

我们与网页的交互大多是通过鼠标和键盘来触发的，了解并掌握鼠标及键盘事件可以帮助我们实现许多常用的交互效果。

三、任务内容

1、常用鼠标事件

名称	描述
click	单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发
contextmenu	右键点击（右键菜单显示前触发）
dblclick	双击左键触发
mouseenter	指针移至元素范围内触发一次
mouseleave	指针移出元素范围外触发一次
mouseover	指针移至元素或其子元素内，可能触发多次
mouseout	指针移出元素，或者移至其子元素内，可能触发多次

代码示例：

var btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() { // 鼠标移入文字为红色
  this.style.color = 'red'
})
btn.addEventListener('click', function() {  // 鼠标单击文字为蓝色
  this.style.color = 'blue'
})
btn.addEventListener('mouseleave', function() { // 鼠标移出文字为黑色
  this.style.color = 'black'
})

事件处理程序中的this指代当前操作元素

2、常用键盘事件

名称	描述
keydown	按下任意按键，按住可连续触发
keypress	按下按键（包括字母，文字和Enter）触发，按住可连续触发，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、方向键等）
keyup	释放任意按键

键盘事件经常用于表单元素中，如：input输入框

代码示例：

var input = document.querySelector('input')
input.addEventListener('keydown', function() {
  console.log('keydown', this.value) // 获取上一次输入值
})
input.addEventListener('keypress', function() {
  console.log('keypress', this.value) // 获取上一次输入值
})
input.addEventListener('keyup', function() {
  console.log('keyup', this.value) // 获取当前输入值
})

使用时注意触发顺序（keydown->keypress->keyup），不同的键盘事件触发时机不同，返回的结果有区别

3、常用键盘事件属性

使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发

名称	描述
keyCode	keyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。 字符代码 - 表示ASCII字符的数字 键盘代码 - 表示键盘上真实键的数字
charCode	返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0
key	返回按键的标识符(字母区分大小写)。keypress，keyup，keydown返回值相同

代码示例：

// 以输入a为例，分别查看三种事件返回结果
var input = document.querySelector('input')
input.addEventListener('keydown', function(event) {
  console.log(event.keyCode)      // 65
  console.log(event.charCode)	  // 0
  console.log(event.key)           // a
})
input.addEventListener('keypress', function(event) {
  console.log(event.keyCode)      // 97
  console.log(event.charCode)     // 97
  console.log(event.key)           // a
})
input.addEventListener('keyup', function(event) {
  console.log(event.keyCode)      // 65
  console.log(event.charCode)     // 0
  console.log(event.key)           // a
})

可以看到，三种事件中，只有key属性返回的结果保持统一，如果不考虑IE8以下浏览器兼容性，推荐使用key来代替keyCode和charCode