JS事件属性的总结

鼠标事件：

1.click（鼠标点击事件）

最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法

<button>点我啊</button>

    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            console.log('我被点击了')
        })
    </script>

2.dblclick（鼠标双击事件）

dblclick是一个鼠标的双击事件，和click唯一的不同点就是click只需要点击一下就会触发相关函数，而dbclick需要点击两下才会触发

<button>点我啊</button>

    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('dblclick', function() {
            console.log('我被双击了')
        })
    </script>

3.mousedown和mouseup（鼠标按下和鼠标按下弹起事件）

mousedown事件和click事件差不多，当鼠标点击后就会执行，mouseup事件是鼠标点击之后松开才会执行

<script>
        let btn = document.querySelector('button')
        btn.addEventListener('mousedown', function() {
            console.log('我点击了')
        })
        btn.addEventListener('mouseup', function() {
            console.log('我点击后松开')
        })
    </script>

4.mouseenter和mouseleave（光标落下和光标离开事件）

mouseenter事件为鼠标光标进入这个元素就触发，mouseleave事件为鼠标光标离开这个元素就触发

<script>
        let btn = document.querySelector('button')
        btn.addEventListener('mouseenter', function() {
            console.log('我进入了')
        })
        btn.addEventListener('mouseleave', function() {
            console.log('我离开了')
        })
    </script>

5.mousemove（光标落下移动多次触发事件）

mousemove事件为鼠标光标进入这个元素里移动就触发多次

<script>
        let btn = document.querySelector('button')
        btn.addEventListener('mousemove', function() {
            console.log('我移动了')
        })
    </script>

6.mouseout和mouseover

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

<script>
        let btn = document.querySelector('button')
        btn.addEventListener('mouseout', function() {
            console.log('我离开了')
        })
        btn.addEventListener('mouseover', function() {
            console.log('我进入了')
        })
    </script>

7.wheel（鼠标滚轮事件）

鼠标进行滚轮时触发

<script>
        let btn = document.querySelector('button')
        btn.addEventListener('wheel', function() {
            console.log('我滚动了')
        })
    </script>

8.contextmenu（鼠标右键点击事件）

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

document.addEventListener('wheel', function() {
         console.log('使用了鼠标右键菜单')
            return false
}

键盘事件：

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

keydown：按下键盘时触发。

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

keyup：松开键盘时触发该事件。

表单事件：

1.input

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

<input id="test" type="text" value="请输入" />
  <script>
    let elem = document.querySelector('#test');
    elem.addEventListener('input', function () { 
      console.log('输入框有变动就触发input事件'); 
    });
  </script>

2.select

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

<input id="test" type="text" value="选中我执行select事件" />
  <script>
    let elem = document.querySelector('#test');
    elem.addEventListener('select', function () { 
      console.log('输入框有变动就触发input事件'); 
    });
  </script>

3.change

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

4.invalid

用户提交表单时，如果表单元素的值不满足校验条件，就会触发invalid事件。

<form>
    <input type="text" required oninvalid="alert('输入不能为空')" />
    <button type="submit">提交</button>
</form>

5.reset 事件，submit 事件

前提：这两个事件发生在表单对象< form>上，而不是发生在表单的成员上。 reset事件当表单重置（所有表单成员变回默认值）时触发。 submit事件当表单数据向服务器提交时触发。

注意：submit事件的发生对象是< form>元素，而不是< button>元素，因为提交的是表单，而不是按钮。