JS事件属性总结【鼠标 / 键盘 / 表单】

悠悠 2023-10-02 12:14 22阅读 0赞

**前言**：  
**资料来自wangdao.com**  
JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作，是用户与浏览器交互最为常见的方式，这里介绍的主要包含以下事件：  
1、鼠标事件  
2、键盘事件  
3、表单事件

### 鼠标事件 ###

下列代码使用了body作为点击的元素，需要在body中加入一个元素节点或文字节点，为方便区别比较，事件相近的做到了一起，常用的鼠标事件前加了 ✦  
✦**1、onclick**  
onclick是最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法

document.body.onclick = function(){
         //点击body元素，触发点击事件
    	console.log('点击事件触发')
    }

**2、ondblclick**  
ondbclick是一个鼠标的双击事件，和onclick唯一的不同点就是onclick只需要点击一下就会触发相关函数，而ondbclikc需要点击两下才会触发

document.body.onclick = function(){
         //双击body元素，触发点击事件
    	console.log('双击事件触发')
    }

**3、onmousedown和onmouseup**  
该事件和onclick类似，鼠标点击后且鼠标为弹起时就执行。onmouseup，顾名思义，就是鼠标点击后松开时执行对应的函数

document.body.onmousedown = function(){
         //点击body元素，触发事件，nomouseup使用方法一致
    	console.log('点击事件触发')
    }

✦**4、onmouseenter和onmouseleave**  
onmouseenter为鼠标进入节点时触发，onmouseleave为鼠标离开该节点触发

document.body.onmouseenter = function(){
         //点击body元素，触发事件，nomouseleave使用方法一致
    	console.log('点击事件触发')
    }

**5、onmousemove**  
onmousemove为鼠标移入节点是触发的事件，该事件和onmouseenter的区别是：onmouseenter在鼠标移入后只会触发一次事件，而该事件则会因为鼠标在该节点内移动而触发多次

document.body.onmousemove = function(){
        
          console.log('鼠标移入事件触发')
        }

✦**6、onmouseout和onmouseover**  
onmouseout和onmouseleave相似，都是鼠标移入元素后再移出时触发，onmouseover和onmouseenter相似，鼠标移入时触发。  
【**onmouseout和onmouseover以及onmouseenter和onmouseleave**】区别在于：  
在父元素内部离开一个子元素时，onmouseleave事件不会触发，而onmouseout事件会触发。onmouseenter事件只触发一次，而只要鼠标在节点内部移动，onmouseover事件会在子节点上触发多次。

document.body.onmouseout = function(){
         //onmouseover同样的写法
          console.log('鼠标离开触发') 
        }

**7、onwheel**  
onwheel，鼠标滚轮事件，鼠标滚轮使用时触发

<div style="width: 30px;height: 1130px;background-color: black;"></div>
     <script>
        document.body.onmousewheel = function(){
          
          console.log('使用鼠标滚轮后触发')
        }
    </script>

**8、oncontextmenu**  
鼠标右键点击触发事件，当返回值为false时，鼠标右键菜单会被关闭

document.oncontextmenu = function(){
         //鼠标右键触发机制，返回false时页面中不能使用鼠标右键菜单
            console.log('使用了鼠标右键菜单');
            return false
          }

✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦

### 键盘事件 ###

键盘事件由用户敲击键盘触发，主要有**keydown、keypress、keyup**三个事件

**keydown**：按下键盘时触发。  
**keypress**：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。  
**keyup**：松开键盘时触发该事件。

详细使用方法在另一篇笔记：[JS键盘事件][JS]

✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦

### 表单事件 ###

表单事件中使用了添加事件监听的方法【addEventListener(‘eventName’,callback)】这个方法是JS标准添加事件方法，该方法需要传入两个参数，第一个是事件名字符串（不加on），第二个是对应的回调函数，前面的鼠标事件中用的onclick等方法都可以使用该方法代替，只需要把前面的on去掉，直接使用后面的事件名。，如：

<!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="test">按钮</button>
      <script>
        var elem = document.getElementById('test');
        elem.addEventListener('click', function (e) {
           
          console.log('点击事件执行'); 
        });
      </script>
    </body>
    </html>

**1、input 事件**  
input事件当< input>、< select>、< textarea>的值发生变化时触发。对于复选框（< input type=checkbox>）  
或单选框（< input type=radio>），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable  
属性的元素，只要值发生变化，也会触发input事件。

<!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>input事件</title>
    </head>
    <body>
      <input id="test" type="text" value="请输入" />
      <script>
        var elem = document.getElementById('test');
        elem.addEventListener('input', function (e) {
           
          console.log('输入框有变动就触发input事件'); 
        });
      </script>
    </body>
    </html>

**2、select 事件**  
select事件当在< input>、< textarea>里面选中文本时触发。

<!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>select事件</title>
    </head>
    <body>
      <input id="test" type="text" value="选中我执行select事件" />
      <script>
        var elem = document.getElementById('test');
        elem.addEventListener('select', function (e) {
           
          console.log('select事件执行'); 
        });
      </script>
    </body>
    </html>

**3、change 事件**  
change事件当< input>、< select>、< textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。具体来说，  
分成以下几种情况：  
激活单选框（radio）或复选框（checkbox）时触发。  
用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。  
当文本框或< textarea>元素的值发生改变，并且丧失焦点时触发。  
**4、invalid 事件**  
用户提交表单时，如果表单元素的值不满足校验条件，就会触发invalid事件。

<!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>
      <form>
        <input type="text" required oninvalid="alert('输入不能为空')" />
        <button type="submit">提交</button>
      </form>
    </body>
    </html>

**5、reset 事件，submit 事件**  
这两个事件发生在表单对象< form>上，而不是发生在表单的成员上。  
reset事件当表单重置（所有表单成员变回默认值）时触发。  
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是< form>元素，  
而不是< button>元素，  
因为提交的是表单，而不是按钮。

[JS]: https://blog.csdn.net/weixin_51033461/article/details/119896407?spm=1001.2014.3001.5501