设置一个按钮
<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("元素自身滚动 滚动条");
});