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
})