window.onresize绑定事件以及解绑事件

问题描述
在Vue工程中，添加样式，部分需要做到自适应，需要添加resize事件，由于是单页面应用，如果组件初始化的时候绑定事件，在切换页面的时候不去注销事件，如果来回切换，
会让resize事件执行多个函数，迅速消耗CPU,浏览器会出现卡顿的情况

解决办法
Vue生命周期mounted 添加 resize事件
Vue生命周期destroy 删除 resize事件
案例
// 定义逻辑函数
function  resizeLogic(){
    console.log(document.documentElement.clientHeight)
}
// 添加 resize 绑定事件
window.addEventListener(
    "resize",resizeLogic,false
);
// 删除绑定的resize事件
function removeResizeAction(){
    window.removeEventListener("resize",resizeLogic);
}

重要的一点是添加的逻辑函数一定要是定义好的函数，而不是“匿名函数”，这样删除的时候就确定是删除那个具体（指针）的函数

监听全局的键盘事件
 // 定义逻辑函数
  function  keyLogic(events){
    console.log(events.key);
  }
  // 添加 resize 绑定事件
  window.addEventListener(
    "keydown",keyLogic,false
  );
  // 删除绑定的resize事件
  function removeKeyAction(){
    window.removeEventListener("keydown",keyLogic);
  }
在react 或者Vue 单页面应用中，如果需要监听这种全局事件，就需要加载组件的时候添加事件，离开组件的时候就应该去掉事件。

原文：https://blog.youkuaiyun.com/hbiao68/article/details/89879661 

 

转载于:https://www.cnblogs.com/qcq0703/p/11208137.html