js监听网络连接状态

最近公司的后台管理系统提了这项需求，故从网上搜集了一些方法，现在记录一下以便日后方便查阅。

首先我把需求贴出来

通过图中的图标告知用户网络连接是否正常，而不是通过信息弹窗的方式提醒，优化了用户体验。

废话就不多说了，直接上代码，本项目是基于vue.js的

mouted () {

this.checkNetwork()

},

methods: {

// 监听网络连接状态
checkNetwork() {
  const that = this
  const EventUtil = {
    addHandler: function(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false)
      } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler)
      } else {