1:例子当我们按下S键时希望输入框自动获取焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="up">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);
if (e.keyCode === 83) {
search.focus();
}
})
document.addEventListener('keydown', function(e) {
alert("我按下键盘了!!!");
})
document.onkeydown = function(e) {
console.log(e.keyCode);
alert("我按下键盘了!!!");
}
document.onkeypress = function() {
alert("我按下了press键盘了!!!");
}
</script>
</body>
</html>
这时,keyup事件竟然失效了,通过注解后,我发现它竟然不能和keydown,或者是keypress同时使用(三个事件同时都注册到一个对象上,keyup就失效了)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="up">
<input type="text" id="up2" style="background-color: aquamarine;">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);
if (e.keyCode === 83) {
search.focus();
}
})
// document.addEventListener('keydown', function(e) {
// alert("我按下键盘了!!!");
// })
// document.onkeydown = function(e) {
// console.log(e.keyCode);
// alert("我按下键盘了!!!");
// }
// document.onkeypress = function() {
// alert("我按下了press键盘了!!!");
// }
var up2 = document.querySelector('#up2');
up2.addEventListener('keydown', function(e) {
alert("我按下键盘了!!!");
})
</script>
</body>
</html>
好鬼扯,但是不知道为什么会这样,我注释后,它就起作用了。