From 8d505bc0a0503c5a937c3b8856d85687a62a407d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E4=BA=91=E6=B5=B7=20mayunhai=20=28=29?=
 <mayunhai@tuniu.com>
Date: Tue, 28 May 2019 11:37:11 +0800
Subject: [PATCH] =?UTF-8?q?EventListener=E4=BD=BF=E7=94=A8element=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85=E7=9A=84=E5=85=BC=E5=AE=B9=E6=96=B9=E6=B3=95=E6=9B=BF?=
 =?UTF-8?q?=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BackToTop/index.vue               |  6 ++++--
 src/components/Charts/mixins/resize.js           |  9 +++++----
 src/components/Dropzone/index.vue                |  5 +++--
 src/components/HeaderSearch/index.vue            |  5 +++--
 src/components/ImageCropper/index.vue            | 16 +++++++++++-----
 src/components/RightPanel/index.vue              |  5 +++--
 src/components/Sticky/index.vue                  | 10 ++++++----
 src/directive/sticky.js                          |  6 ++++--
 src/directive/waves/waves.js                     |  9 +++++----
 src/layout/components/TagsView/index.vue         |  5 +++--
 src/layout/mixin/ResizeHandler.js                |  5 +++--
 .../dashboard/admin/components/mixins/resize.js  |  9 +++++----
 src/views/login/index.vue                        |  6 ++++--
 13 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index 36522f4a..22c4ff52 100644
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import { on, off } from 'element-ui/src/utils/dom'
+
 export default {
   name: 'BackToTop',
   props: {
@@ -45,10 +47,10 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll)
+    on(window, 'scroll', this.handleScroll)
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll)
+    off(window, 'scroll', this.handleScroll)
     if (this.interval) {
       clearInterval(this.interval)
     }
diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
index dccaf1a8..875faa82 100644
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -1,4 +1,5 @@
 import { debounce } from '@/utils'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   data() {
@@ -12,15 +13,15 @@ export default {
         this.chart.resize()
       }
     }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
+    on(window, 'resize', this.__resizeHandler)
 
     this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    on(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.__resizeHandler)
+    off(window, 'resize', this.__resizeHandler)
 
-    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    off(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
   },
   methods: {
     // use $_ for mixins properties
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index bad9eb90..3c180344 100644
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -7,6 +7,7 @@
 <script>
 import Dropzone from 'dropzone'
 import 'dropzone/dist/dropzone.css'
+import { on, off } from 'element-ui/src/utils/dom'
 // import { getToken } from 'api/qiniu';
 
 Dropzone.autoDiscover = false
@@ -145,7 +146,7 @@ export default {
     })
 
     if (this.couldPaste) {
-      document.addEventListener('paste', this.pasteImg)
+      on(document, 'paste', this.pasteImg)
     }
 
     this.dropzone.on('success', file => {
@@ -165,7 +166,7 @@ export default {
     })
   },
   destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
+    off(document, 'paste', this.pasteImg)
     this.dropzone.destroy()
   },
   methods: {
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index af047168..65bd8206 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -22,6 +22,7 @@
 // make search results more in line with expectations
 import Fuse from 'fuse.js'
 import path from 'path'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   name: 'HeaderSearch',
@@ -48,9 +49,9 @@ export default {
     },
     show(value) {
       if (value) {
-        document.body.addEventListener('click', this.close)
+        on(document.body, 'click', this.close)
       } else {
-        document.body.removeEventListener('click', this.close)
+        off(document.body, 'click', this.close)
       }
     }
   },
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index c30c5b18..0518fbe8 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -115,6 +115,8 @@ import language from './utils/language.js'
 import mimes from './utils/mimes.js'
 import data2blob from './utils/data2blob.js'
 import effectRipple from './utils/effectRipple.js'
+import { on, off } from 'element-ui/src/utils/dom'
+
 export default {
   props: {
     // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
@@ -839,15 +841,19 @@ export default {
           that.$emit('crop-upload-fail', err, field, ki)
         }
       })
+    },
+    $_closeHandler(e) {
+      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+        this.off()
+      }
     }
   },
   created() {
     // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', (e) => {
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
-        this.off()
-      }
-    })
+    on(document, 'keyup', this.$_closeHandler)
+  },
+  beforeDestroy() {
+    off(document, 'keyup', this.$_closeHandler)
   }
 }
 </script>
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 55e8c1e5..02c1bc33 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -14,6 +14,7 @@
 
 <script>
 import { addClass, removeClass } from '@/utils'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   name: 'RightPanel',
@@ -58,13 +59,13 @@ export default {
   },
   methods: {
     addEventClick() {
-      window.addEventListener('click', this.closeSidebar)
+      on(window, 'click', this.closeSidebar)
     },
     closeSidebar(evt) {
       const parent = evt.target.closest('.rightPanel')
       if (!parent) {
         this.show = false
-        window.removeEventListener('click', this.closeSidebar)
+        off(window, 'click', this.closeSidebar)
       }
     },
     insertToBody() {
diff --git a/src/components/Sticky/index.vue b/src/components/Sticky/index.vue
index 97ce0e96..8fd2a83f 100644
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { on, off } from 'element-ui/src/utils/dom'
+
 export default {
   name: 'Sticky',
   props: {
@@ -39,15 +41,15 @@ export default {
   },
   mounted() {
     this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleResize)
+    on(window, 'scroll', this.handleScroll)
+    on(window, 'resize', this.handleResize)
   },
   activated() {
     this.handleScroll()
   },
   destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleResize)
+    off(window, 'scroll', this.handleScroll)
+    off(window, 'resize', this.handleResize)
   },
   methods: {
     sticky() {
diff --git a/src/directive/sticky.js b/src/directive/sticky.js
index bc234660..8df3579c 100644
--- a/src/directive/sticky.js
+++ b/src/directive/sticky.js
@@ -1,3 +1,5 @@
+import { on, off } from 'element-ui/src/utils/dom'
+
 const vueSticky = {}
 let listenAction
 vueSticky.install = Vue => {
@@ -78,11 +80,11 @@ vueSticky.install = Vue => {
         check()
       }
 
-      window.addEventListener('scroll', listenAction)
+      on(window, 'scroll', listenAction)
     },
 
     unbind() {
-      window.removeEventListener('scroll', listenAction)
+      off(window, 'scroll', listenAction)
     }
   })
 }
diff --git a/src/directive/waves/waves.js b/src/directive/waves/waves.js
index ec2ff439..f26019fd 100644
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@@ -1,4 +1,5 @@
 import './waves.css'
+import { on, off } from 'element-ui/src/utils/dom'
 
 const context = '@@wavesContext'
 
@@ -58,14 +59,14 @@ function handleClick(el, binding) {
 
 export default {
   bind(el, binding) {
-    el.addEventListener('click', handleClick(el, binding), false)
+    on(el, 'click', handleClick(el, binding), false)
   },
   update(el, binding) {
-    el.removeEventListener('click', el[context].removeHandle, false)
-    el.addEventListener('click', handleClick(el, binding), false)
+    off(el, 'click', el[context].removeHandle, false)
+    on(el, 'click', handleClick(el, binding), false)
   },
   unbind(el) {
-    el.removeEventListener('click', el[context].removeHandle, false)
+    off(el, 'click', el[context].removeHandle, false)
     el[context] = null
     delete el[context]
   }
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 24a92f1d..e463029d 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -28,6 +28,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   components: { ScrollPane },
@@ -55,9 +56,9 @@ export default {
     },
     visible(value) {
       if (value) {
-        document.body.addEventListener('click', this.closeMenu)
+        on(document.body, 'click', this.closeMenu)
       } else {
-        document.body.removeEventListener('click', this.closeMenu)
+        off(document.body, 'click', this.closeMenu)
       }
     }
   },
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
index e8d0df8c..aabadbd3 100644
--- a/src/layout/mixin/ResizeHandler.js
+++ b/src/layout/mixin/ResizeHandler.js
@@ -1,4 +1,5 @@
 import store from '@/store'
+import { on, off } from 'element-ui/src/utils/dom'
 
 const { body } = document
 const WIDTH = 992 // refer to Bootstrap's responsive design
@@ -12,10 +13,10 @@ export default {
     }
   },
   beforeMount() {
-    window.addEventListener('resize', this.$_resizeHandler)
+    on(window, 'resize', this.$_resizeHandler)
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.$_resizeHandler)
+    off(window, 'resize', this.$_resizeHandler)
   },
   mounted() {
     const isMobile = this.$_isMobile()
diff --git a/src/views/dashboard/admin/components/mixins/resize.js b/src/views/dashboard/admin/components/mixins/resize.js
index bcd17bf0..4b194a91 100644
--- a/src/views/dashboard/admin/components/mixins/resize.js
+++ b/src/views/dashboard/admin/components/mixins/resize.js
@@ -1,4 +1,5 @@
 import { debounce } from '@/utils'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   data() {
@@ -35,10 +36,10 @@ export default {
       }, 100)()
     },
     $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
+      on(window, 'resize', this.$_resizeHandler)
     },
     $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
+      off(window, 'resize', this.$_resizeHandler)
     },
     $_sidebarResizeHandler(e) {
       if (e.propertyName === 'width') {
@@ -47,10 +48,10 @@ export default {
     },
     $_initSidebarResizeEvent() {
       this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      on(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
     },
     $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+      off(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
     }
   }
 }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d991457c..16a7d1e5 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -76,6 +76,8 @@
 <script>
 import { validUsername } from '@/utils/validate'
 import SocialSign from './components/SocialSignin'
+// eslint-disable-next-line
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   name: 'Login',
@@ -125,7 +127,7 @@ export default {
     }
   },
   created() {
-    // window.addEventListener('storage', this.afterQRScan)
+    // on(window, 'storage', this.afterQRScan)
   },
   mounted() {
     if (this.loginForm.username === '') {
@@ -135,7 +137,7 @@ export default {
     }
   },
   destroyed() {
-    // window.removeEventListener('storage', this.afterQRScan)
+    // off(window, 'storage', this.afterQRScan)
   },
   methods: {
     checkCapslock({ shiftKey, key } = {}) {