设置一个按钮

<button>点击</button>

var btn = document.querySelector("button");
  btn.addEventListener("click", () => {
    console.log("鼠标按下松开时 鼠标指针在被选元素区块内部");
  });

btn.addEventListener("dblclick", () => {
  console.log("鼠标第一次按下和第二次松开时 鼠标指针在被选元素区块内部 并且间隔时间不能太长");
});

btn.addEventListener("mousedown", () => {
  console.log("鼠标在被选元素内按下");
});

btn.addEventListener("mouseover", () => {
  console.log("鼠标进入被选元素内 经过就触发");
});

btn.addEventListener("mouseout", () => {
  console.log("鼠标离开被选元素内");
});

btn.addEventListener("mouseup", () => {
  console.log("鼠标在被选元素内松开");
});

 以下两个和上面不同的是mouseleave mouseenter不支持时间冒泡mouseover和mouseout支持事件冒泡

btn.addEventListener("mouseenter", () => {
  console.log("鼠标进入被选元素内");
});

btn.addEventListener("wheel", () => {
  console.log("鼠标滚轮滚动");
});

btn.addEventListener("scroll", () => {
  console.log("元素自身滚动 滚动条");
});