JavaScript的事件初始

红太狼 2024-05-06 21:24 58阅读 0赞

## JavaScript 的事件初识 ##

### 基本概念 ###

> html和JS做的一个约定。浏览器需要监听用户做了什么样的操作，并对用户的操作进行对应的反馈，从而形成一个动态的页面效果。 用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个的事件。

### 事件的三要素 ###

1.  事件源: 哪个元素触发的
2.  事件类型: 是点击, 选中, 还是修改
3.  事件处理程序: 进一步的处理，往往是一个回调函数(用JS编写的)

示例代码

<body>
       <input type="button" value="这是一个按钮">
    </body>
    <script>
        // 事件源
        let button = document.querySelector('input')
        // 绑定事件类型(点击事件)
        // 函数设定了事件处理程序
        button.onclick = function() {
        
            alert("hello")
        }
    </script>

### 常用的键盘事件 ###

#### onkeydown 事件 ####

onkeydown 事件在用户按下某个键(在键盘上)时发生。

示例：显示键盘按下的对应字母

<body>
       <input type="button" value="这是一个按钮">
    </body>
    <script>
    // 事件源
        let input = document.querySelector('input')
        // 绑定事件
        input.onkeydown = function(event) {
        
            console.log("键盘正在按下");
            let a = event.keyCode;
            let b = String.fromCharCode(a)
            console.log(b)
        }
    </script>

注：onkeydown 事件不区分大小写，但是 onkeypress 事件可以

#### onkeypress 事件 ####

onkeypress 事件也是在用户按下键(在键盘上)时发生

注：不是所有键（例如 ALT、CTRL、SHIFT、ESC）都会在所有浏览器中触发 onkeypress 事件，如需只检测用户是否按下了某个键，需改用 onkeydown 事件，因为它适用于所有键

示例：显示键盘按下的对应字母

<body>
       <input type="button" value="这是一个按钮">
    </body>
    <script>
        // 事件源
        let input = document.querySelector('input')
        // 绑定事件
        input.onkeypress = function(event) {
        
            console.log("键盘正在按下");
            let a = event.keyCode;
            let b = String.fromCharCode(a)
            console.log(b)
        }
    </script>

#### onkeyup 事件 ####

onkeyup 事件在用户释放键（在键盘上）时发生

示例：释放按键时给出提示

<body>
        <input type="text" onkeyup="myOnkeyUp()">   
    </body>
    <script>
        function myOnkeyUp() {
        
        	console.log("按键被抬起")
        }
    </script>

#### KeyboardEvent 对象 ####

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>属性/方法</strong></th> 
   <th align="center"><strong>描述</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">altKey</td> 
   <td align="center">返回触发按键事件时是否按下了 “ALT” 键</td> 
  </tr> 
  <tr> 
   <td align="center">ctrlKey</td> 
   <td align="center">返回按键鼠标事件时是否按下了 “CTRL” 键</td> 
  </tr> 
  <tr> 
   <td align="center">shiftKey</td> 
   <td align="center">返回按键事件触发时是否按下了 “SHIFT” 键</td> 
  </tr> 
 </tbody> 
</table>

示例代码

<body>
        <input type="text">
    </body>
    <script>
        let input = document.querySelector('input')
        input.onkeydown = function(event) {
        
            //如果按键按下的是shift此时弹出一个弹窗，提示shift被按下
            if(event.shiftKey) {
        
                alert("shift键被按下")
            }
            if(event.altKey) {
        
                alert("alt键被按下")
            }
        }
    </script>