0
点赞
收藏
分享

微信扫一扫

操作键盘事件源码解析(常用的鼠标事件、 键盘事件对象之keyCode属性)


操作键盘事件

常用的鼠标事件

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用的鼠标事件</title>
</head>

<body>
<script>// 常用的键盘事件
//1. keyup 按键弹起的时候触发
// document.onkeyup = function() {
// console.log('我弹起了');

// }



document.addEventListener('keyup', function () {
console.log('我弹起了');
})

//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function () {
console.log('我按下了press');
})




//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function () {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup</script>
</body>

</html>

键盘事件对象之keyCode属性

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>键盘事件对象之keyCode属性</title>
</head>

<body>
<script>// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

// 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65

// 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65

document.addEventListener('keyup', function (e) {
// console.log(e);

console.log('up:' + e.keyCode);

// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}

})


document.addEventListener('keypress', function (e) {
// console.log(e);
console.log('press:' + e.keyCode);

})</script>
</body>

</html>


举报

相关推荐

0 条评论