前端-窗口监听addEventListener事件

监听鼠标移出该 div

代码

// 鼠标移出小窗口自动保存
const ele = document.getElementById('container')
if (ele) {
  ele.addEventListener('mouseleave', event => {
    saveData(model.model, graph, graphRef.current)
    return () => {
      ele.removeEventListener('mouseleave', () => {
        saveData(model.model, graph, graphRef.current)
      })
    }
  })
}

注意事项

1. 注意判断 有没有取到被监听的元素，否则报错 xxx is null
   1.1 if 判断，存在再监听
   1.2 Dom 内容加载完成后再监听（即先监听页面 dom 是否加载完成）

window.addEventListener('DOMContentLoaded', event => {
  const el = document.getElementById('overlayBtn')
  if (el) {
    el.addEventListener('click', Fn)
  }
  return () => {
    ele.removeEventListener('click', Fn)
  }
})

2. 添加监听事件后最终 return 里需要移出，否则会引起内存泄露

参考

Element：mouseout 事件
前端如何正确的添加、销毁全局事件监听