监测鼠标停留三秒事件
<div id="div" style="width: 100px; height: 100px;"> 请将鼠标放在该区域</div>
//1. 生成事件对象
let customEvent = new CustomEvent("stayFor3Seconds", {
detail: {
date: new Date()
}
})
//2. 监听事件
let target = document.getElementById("div");
target.addEventListener("stayFor3Seconds", function(event){
console.log(event.detail.date);
})
//3.触发自定义事件
let timer;
target.addEventListener("mouseenter", function(){
//鼠标进入div内，则设置一个3秒的计时器，通过dispatchEvent触发事件
timer = setTimeout(() => {
this.dispatchEvent(customEvent);
}, 3000)
})
//鼠标离开时解除上述定时任务
target.addEventListener("mouseleave", function(){
clearTimeout(timer);
timer = null;
})
以上三步综合来看是这样的：
// 1. 生成事件对象
letevent=newCustomEvent("event_name",{...//事件参数});
// 2. 监听事件
target.addEventListener("event_name",function(e){...//处理事件})
// 3. 触发事件
target.dispatchEvent(event);
