javaScript：键盘事件和表单事件以及鼠标键盘结合事件

目录

键盘事件

keydown 键盘按键按下去的时候执行的事件

详解

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

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

表单事件（常用）

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

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

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

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

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

键盘和事件对象结合

鼠标事件结合对象 

 相关代码

---

键盘事件

      一般的，可以对获取焦点的元素，设置键盘事件，无法设置焦点的元素不能设置键盘事件可以获取焦点的元素：input textarea a document

     不可以获取焦点的元素 div span

keydown 键盘按键按下去的时候执行的事件

详解

1. 事件名称：keydown。

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

3. 事件参数：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键）。

4. 事件监听：可以使用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

鼠标事件结合对象 

鼠标事件结合对象

event.button的值

   0 表示操作的是 鼠标左键

   1 表示操作的是 鼠标滚轮

   2 表示操作的是 鼠标右键

event.which的值

   1 表示操作的是 鼠标左键

   2 表示操作的是 鼠标滚轮

   3 表示操作的是 鼠标右键  

 相关代码

    txt.onkeydown = function(){
        console.log(event);
        if (event.keyCode==13) { //用户按下回车键
            alert('确定要提交提交数据吗？')
        }
    }
 
    let plane = document.querySelector('.plane')
    document.onkeydown = function(){
        if (event.keyCode==38) {
            plane.style.top = plane.offsetTop-5+'px'
        }
        if (event.keyCode==37) {
            plane.style.left = plane.offsetLeft-5+'px'
        }
        if (event.keyCode==39) {
            plane.style.left = plane.offsetLeft+5+'px'
        }
        if (event.keyCode==40) {
            plane.style.top = plane.offsetTop+5+'px'
        }
    }
 
    document.onclick = function(){
        console.log(event)
    }
    document.oncontextmenu = function(){
        console.log(event);
        return false;
    }