js键盘事件

键盘事件

点击键盘按键后触发键盘事件

 代码

//1.keyup 键盘按键弹起
		document.addEventListener('keyup', function() {
			console.log('弹起');
		})
		
		//2.keydown 键盘按键按下
		document.addEventListener('keydown', function() {
			console.log('按下down');
		})
		
		//3.keypress 键盘按键按下
		document.addEventListener('keypress', function() {
			console.log('按下press');

        //4.三个事件的执行顺序 keydown -> keypress -> keyup
		})

注意:

1. 如果使用addEventListener不需要加on
2. onkeypress和前面两个的区别是不识别功能键
3. 三个事件的执行顺序 keydown -> keypress -> keyup

 

键盘事件对象

 注意:onkeydown 和 onkeyup 不区分字母大小写,onkeypress区别字母大小写

实际开发更多使用keydown 和 keyup, 他能识别所有的按键(包括功能键)

ASCII表

代码

        //键盘事件对象中的keyCode属性可以得到相应按键的ASCII码值
		//可以利用keyCode返回的值来判断用户按下了哪个键
		document.addEventListener('keyup', function(e) {
			console.log('up=' + e.keyCode);
			//keyup 和 keydown 不区分字母大小写
			if(e.keyCode == 65) {
				alert('你按下了a键');
			}else {
				alert('你没有按下a键');
			}
		})
		
		document.addEventListener('keypress', function(e) {
			console.log('press=' + e.keyCode);
			//keypress 事件区分字母大小写
		})