javaScript：键盘事件和表单事件以及鼠标键盘结合事件_传入键盘事件原始数据js-优快云博客

详解

事件名称：keydown。

事件对象：触发keydown事件的DOM元素。

事件参数：keydown事件的回调函数会接收一个KeyboardEvent对象作为参数。通过该对象，可以获取有关按下的键以及其他相关信息。

event.key：被按下的键的值。它可以是单个字符（例如"A"、"Enter"、"Shift"）或功能键（例如"Control"、"Alt"、"ArrowUp"）。
event.keyCode：被按下的键的ASCII码值，已经被废弃，推荐使用event.key代替。
event.ctrlKey：判断是否按下Ctrl键。
event.shiftKey：判断是否按下Shift键。
event.altKey：判断是否按下Alt键。
event.metaKey：判断是否按下Meta键（在Windows操作系统上为Windows键，在Mac操作系统上为Command键）。

事件监听：可以使用addEventListener方法将事件监听器绑定到需要监听的DOM元素上，如下所示：

   txt.onkeydown = function(){
    console.log(txt.value);
   }

keyup 键盘按键抬起的时候执行的事件

keyup 事件是在用户释放键盘上的按键时触发的事件。可以通过绑定 keyup 事件处理程序来执行在键盘按键抬起时需要执行的操作。

// 获取目标元素
var v= document.getElementById('my-input');

// 绑定 keyup 事件处理程序
v.addEventListener('keyup', function(event) {
  // 获取按下的键码和键值
  var keyCode = event.keyCode;
  var keyValue = event.key;

  // 执行相关操作
  console.log('Key up event occurred!');
  console.log('Pressed key code: ' + keyCode);
  console.log('Pressed key value: ' + keyValue);
});

keypress 只有输入型按键按下的时候才执行，非输入性按钮不执行

   txt.onkeypress = function(){
    console.log('一个萝卜');
   }

表单事件（常用）

focus 当元素获取焦点的时候触发的事件（聚焦）

    txt.onfocus = function(){
        txt.style.width = '300px'
    }
        window.onfocus = function(){
        console.log('window获取焦点');
    }

blur 当元素失去焦点的时候触发的事件（失焦）

    txt.onblur = function(){
        txt.style.width = '140px'
    }
    window.onblur = function(){
        console.log('window失去焦点');
    }

change 当元素的内容发生改变的时候触发的事件

change 当元素的内容发生改变的时候触发的事件，输入型元素失去光标后才会执行该事件

txt.onchange = function(){
        tips.innerHTML = txt.value
    }

input 输入型元素在输入内容的时候触发的事件

    txt1.oninput = function(){
        msg.innerHTML = txt1.value;
    }

鼠标键盘结合事件（重点）

键盘和事件对象结合

键盘和事件对象结合，可以获取用户操作的是哪一个键，或者获取用户操作的键值，通过键值可以识别按键并且执行相应的操作

键值通过 event.keyCode 获取

以下是常用keyCode

回车键 13

左键 37

上键 38

右键 39

下键 40

event.which 的值和keyCode一样，一般使用keyCode