第一：获取键盘按键事件
<!DOCTYPE html>
<html lang="zh">
<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>
<input type="text" name="" id="" value="" />
</body>
</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//keyup 是键盘按下并弹起时触发
$('input').keyup(function(event){
console.log(event.keyCode);
if(event.keyCode=='13'){
console.log('您按下了确认键');
}
});
//keypress 输入字符时
$('input').keypress(function(event){
console.log(event.keyCode);
console.log('您正在输入')
});
//keyup 释放按键时
$('input').keyup(function(event){
console.log(event.keyCode);
console.log('您已停止输入')
});
});
</script>第二：判断键盘按键事件
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
div{margin:60px auto;width:600px;height:600px;border:1px solid red;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){//在body区域内按下鼠标左右分别得出各自的值
$("body").mousedown(function(e){
$('div').html(e.which)
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {//在div区域内按下鼠标，根据值得出按下的哪个键
$("div").mousedown(function(event) {
if(event.button == 0) {
console.log("您点击了鼠标左键!");
} else if(event.button == 2) {
console.log("您点击了鼠标右键!");
}
});
});
</script>
<script type="text/javascript">
//鼠标滑轮事件
windowAddMouseWheel();
function windowAddMouseWheel() {
var scrollFunc = function(e) {
e = e || window.event;
if(e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if(e.wheelDelta > 0) { //当滑轮向上滚动时
console.log("滑轮向上滚动");
}
if(e.wheelDelta < 0) { //当滑轮向下滚动时
console.log("滑轮向下滚动");
}
} else if(e.detail) { //Firefox滑轮事件
if(e.detail > 0) { //当滑轮向上滚动时
console.log("滑轮向上滚动");
}
if(e.detail < 0) { //当滑轮向下滚动时
console.log("滑轮向下滚动");
}
}
};
//给页面绑定滑轮滚动事件
if(document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
}
</script>第三：调用键盘按键事件
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.con{top:0;left:0;width:100%;height:100%;background-color:blue;line-height:500px;text-align:center;display:none;position:fixed;}
</style>
</head>
<body>
<a class="click-btn" href="javascript:;">点击</a>
<div class="con">我是内容</div>
</body>
</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$('a.click-btn').click(function(){
$('.con').fadeIn();
});
$(document).keyup(function(event){
switch(event.keyCode){
case 27: //这是Esc键
$('.con').fadeOut();
case 96: //这是数字0键
$('.con').fadeOut();
}
});
</script>
