事件 - 鼠标事件 - 《JavaScript》

鼠标点击触发顺序

<!DOCTYPE html>
<html lang="zh-CN">
  <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>鼠标点击事件</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script>
      const btn = document.getElementById('btn')
      btn.onclick = function () {
        console.log('按钮被点击了')
      }
    </script>
  </body>
</html>

鼠标事件	触发条件
onmouseover	鼠标经过触发（包含子元素，会冒泡）
onmouseenter	鼠标经过触发（不含子元素，不会冒泡）
onmouseout	鼠标离开触发（包含子元素，会冒泡）
onmouseleave	鼠标离开触发（不含子元素，不会冒泡）
onmousedown	鼠标按下触发
onmouseup	鼠标弹起触发
onclick	鼠标点击左键触发
onmousemove	鼠标移动触发
onmousewheel	鼠标滚轮滚动触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
oncontextmenu	鼠标右键菜单
onselectstart	鼠标选中

鼠标点击触发顺序

onmousedown
onmouseup
onclick