总结下js的鼠标事件

cp3_forever
2,352 阅读3分钟

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

前言

上一篇我介绍了js的键盘事件，今天咱们来学习js的鼠标事件，以及他们各自的区别。

介绍

js的鼠标事件类型比键盘事件（keydown事件，keypress事件，keyup事件）多一些

主要是2类，鼠标点击事件和鼠标滑过事件。

如下：

鼠标点击事件描述
click鼠标左键单击事件
dblclick鼠标左键双击事件
contextmenu鼠标右键单击事件，使用该事件一般要阻止浏览器的默认行为，因为浏览器默认会弹出右键的菜单
mousedown鼠标左键按下的时候触发的事件
mouseup鼠标左键按下，然后松开的时候触发的事件
鼠标滑过事件描述
mouseover鼠标刚滑入绑定元素的时候触发的事件
mouseenter鼠标刚滑入绑定元素的时候触发的事件，触发时机在mouseover之后
mouseout鼠标滑出绑定元素的时候触发的事件
mouseleave鼠标滑出绑定元素的时候触发的事件，触发时机在mouseout之后
mousemove鼠标在滑入绑定元素后，在里面移动触发的事件

区别

鼠标点击事件

  1. 执行顺序

      <div class="content">
    你好，我是答案cp3！
  </div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('click', () => {
      console.log('我是click事件')
    })
    div.addEventListener('dblclick', () => {
      console.log('我是dblclick事件')
    })
    div.addEventListener('mousedown', (e) => {
      console.log('我是mousedown事件')
    })
    div.addEventListener('mouseup', (e) => {
      console.log('我是mouseup事件')
    })
 </script>

    image.png

    通过打印的顺序可以看到

    mousedown => mouseup => click

    然后dblclick（双击）是执行2遍（mousedown，mouseup，click）后再执行。

鼠标滑过事件

  1. 执行顺序

      <div class="content">
    你好，我是答案cp3！
  </div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('mouseover', (e) => {
      console.log('我是mouseover事件')
    })
    div.addEventListener('mouseenter', (e) => {
      console.log('我是mouseenter事件')
    })
    div.addEventListener('mouseout', (e) => {
      console.log('我是mouseout事件')
    })
    div.addEventListener('mouseleave', (e) => {
      console.log('我是mouseleave事件')
    })
    div.addEventListener('mousemove', (e) => {
      console.log('我是mousemove事件')
    })
  </script>

    image.png

    通过打印的顺序可以看到

    滑入时：

    mouseover => mouseenter => mousemove（内部滑动会执行多次）

    滑出时：

    mouseout => mouseleave

  2. 如果绑定元素有后代元素，滑入/滑出后代元素时mouseover/mouseout也会触发，mouseenter/mouseleave只会在绑定元素滑入/滑出时触发。

      <div class="content">
    你好，我是答案cp3！
    <div>我是子元素</div>
  </div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('mouseover', (e) => {
      console.log('我是mouseover事件')
    })
    div.addEventListener('mouseenter', (e) => {
      console.log('我是mouseenter事件')
    })
    div.addEventListener('mouseleave', (e) => {
      console.log('我是mouseleave事件')
    })
    div.addEventListener('mouseout', (e) => {
      console.log('我是mouseout事件')
    })
    div.addEventListener('mousemove', (e) => {
      console.log('我是mousemove事件')
    })
  </script>

    image.png

    我是从上往下滑动

    先滑入绑定元素，然后再滑入子元素，然后滑出子元素，同时滑出绑定元素。

    在这个过程中：

    • mouseover触发2次，分别是滑入绑定元素和滑入子元素的时候触发。
    • mouseout触发2次，分别是滑入子元素（相当于滑出绑定元素触发）和滑出子元素的时候触发。
    • mouseenter只触发一次，只在第一次滑入绑定元素时候触发
    • mouseleave只触发一次，只在最后滑出绑定元素时候触发
    • mousemove触发多次，因为这个事件灵敏，稍微移动就会触发多次

    结论：

    • mouseover和mouseout是一对，滑入/滑出绑定元素和后代元素都会触发

    • mouseenter和mouseleave是一对，滑入/滑出绑定元素才会触发，滑入/滑出后代元素不会重复触发

总结

以上就是我总结的js的鼠标事件。事件的类型有点多，大家可以学习，动手敲敲代码，可以加深印象。

感谢你们的阅读。

avatar
文章
阅读
粉丝