js常用事件

本是古典何须时尚 2023-10-04 14:46 65阅读 0赞

#### 文章目录 ####

*  1. 点击事件（绑定事件的模板）
 *  2. 鼠标事件
 *   *  2.1 鼠标左键被单击或者双击
     *  2.2 鼠标进去或离开
     *  2.3 鼠标mouseup识别哪个按钮被点击
     *  2.4 mouseup的回调参数
     *  2.5 \[oncontextmenu\](https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu) 事件
 *  3. 键盘事件(\`keydown\`)
 *   *  更多事件属性见MDN

--------------------

## 1. 点击事件（绑定事件的模板） ##

等价于以下代码

--------------------

注意onclick单词全是小写，然后绑定的函数记得加括号，不然点击按钮会没有响应！！！注意与Vue跟react的区别，博主就是写多了Vue所以事件处理这种基础都忘了，所以回来复习，顺便来个小博客哈哈

--------------------

## 2. 鼠标事件 ##

*  贴一个[MDN][]

The `MouseEvent` interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include `click`, `dblclick`, `mouseup`, `mousedown`.

`MouseEvent` derives from `UIEvent`, which in turn derives from `Event`. Though the `MouseEvent.initMouseEvent()` method is kept for backward compatibility, creating of a `MouseEvent` object should be done using the `MouseEvent()` constructor.

Several more specific events are based on `MouseEvent`, including `WheelEvent` and `DragEvent`.

![在这里插入图片描述][20210528232349643.png]

--------------------

### 2.1 鼠标左键被单击或者双击 ###

*  实践经验告诉我：在一定的时间间隔单击两次鼠标就算双击哦

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">按键</button>
        <script>
            const btn = document.getElementById('btn')
           // console.log("获取到的元素",btn)  //        可以开这一行代码看获取到的元素
            btn.onclick = function(){
          
                console.log("按钮被点击")
            }
            btn.ondblclick = function(){
          
                console.log("按钮被双击了")
            }
        </script>
        <noscript>您的浏览器不支持js哦</noscript>
    </body>
    </html>

或者这样添加

btn.addEventListener('click',()=>{
        
             console.log("按钮被点击了")
         })
         btn.addEventListener('dblclick',()=>{
        
             console.log("按钮被双击了")
         })

### 2.2 鼠标进去或离开 ###

btn.addEventListener('mouseenter',()=>{
        
                console.log("鼠标进入")
            })
            btn.addEventListener('mouseleave',()=>{
        
                console.log("鼠标离开")
            })

*  或者

btn.onmouseenter = function(){
        
                console.log("鼠标进入")
            }
            btn.onmouseleave = function(){
        
                console.log("鼠标离开")
            }

### 2.3 鼠标mouseup识别哪个按钮被点击 ###

*  `e.button`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">按键</button>
        <script>
            const btn = document.getElementById('btn')
            btn.addEventListener('mouseup',(e)=>{
          
                switch(e.button){
          
                    case 0:{
          
                        console.log("鼠标左键被点击")
                        break
                    }
                    case 1:{
          
                        console.log("1号被点击")
                        break
                    }
                    case 2:{
          
                        console.log("鼠标右键被点击")
                        break
                    }
                }
            })
        </script>
        <noscript>您的浏览器不支持js哦</noscript>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]

--------------------

### 2.4 mouseup的回调参数 ###

*  测试代码

*  结果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]

--------------------

### 2.5 [oncontextmenu][] 事件 ###

**`oncontextmenu`** 是用来设置或获取全局事件(`GlobalEventHandlers`)中 上下文菜单事件(`contextmenu (en-US)`) 的处理函数(`event handler`)。

当在窗口上单击鼠标右键时，通常会触发 `contextmenu` 事件。 除非阻止默认行为，否则浏览器上下文菜单将被激活。

[W3C][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 3]

--------------------

## 3. 键盘事件(`keydown`) ##

eventTarget.addEventListener("keydown", event => {
        
      if (event.isComposing || event.keyCode === 229) {
        
        return;
      }
      // do something
    });

### 更多事件属性见MDN ###

[官网][Link 1]

--------------------

[MDN]: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
[20210528232349643.png]: https://img-blog.csdnimg.cn/20210528232349643.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210529000305881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210529000231477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210529004434521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[oncontextmenu]: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu
[W3C]: https://www.w3cschool.cn/jsref/event-oncontextmenu.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210529110157709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/clientX