addEventListener但是不调removeEventListener引发的“惨案“

Bug症状：
在B页面点击a标签下载文件，却在下载成功后调用了A页面的几个http请求。看得我直呼好家伙！

寻找病理：

  //点击下载按钮调用此方法下载文件
  static downloadFileByUrl(url: string) {
    const urlObject: any = window.URL || window;
    let saveLink: any = document.createElement("a");
    saveLink.href = url;
    saveLink.download = url.replace(/^.*\//g, "");
    saveLink.click(); // 发现注释掉它就不会再调A页面的请求了  
  }

可是注释了click方法，我的下载功能就歇了…

那么换种思路找原因——A页面中都是何时调用了这几个http请求：

 const events = ["beforeunload", "popstate", "unload"] 
 // window监听 + 处理
 handleListener(e) {
    e.preventDefault()
    this.exitEdit() // 就是这个方法里调用了那些http请求
  },
  // 浏览器前进、后退、刷新导致的退出详情编辑
  onWindowOpt() {
    events.forEach(item => {
      window.addEventListener(item, this.handleListener)
    })
  }

原来在A页面，是在浏览器前进、后退和刷新的时候触发了那些请求。
== ，我在离开A页面去到B页面的过程中还经过了别的页面，怎么就没触发浏览器的监听呢？
思索片刻：o！因为这些页面的跳转都只是路由的跳转，没有浏览器的前进、后退和刷新。
再等等，为什么我利用a标签的click下载文件就会触发浏览器的监听了呢？
Google片刻：噢！我给a标签设置了href属性，href属性是链接时，点击a标签，浏览器会执行跳转操作，只是默认在当前tab页展示 href 属性指定的 URL 所表示的文档。

快速治虫：
很简单，就是把监听过的浏览器事件全都removeEventListener

  const events = ["beforeunload", "popstate", "unload"]
  // 销毁页面之前，取消所有对window的监听
  beforeDestroy() {
    events.forEach(item => {
      window.removeEventListener(item, this.handleListener)
    })
  },

总结：有头没尾的事情干多了就会这样…