监测鼠标停留三秒事件

<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);