From 9673ad94cd21cf85ed9ad68835a64f2878a8a627 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 27 Nov 2020 01:54:14 +0800
Subject: [PATCH] refactor(scrollbar): use evtd to handle events

---
 src/_utils/delegate/keyboardDelegate.js |  5 +++--
 src/dropdown/src/Dropdown.js            |  2 +-
 src/scrollbar/src/ScrollBar.vue         | 24 ++++++++++++++----------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/_utils/delegate/keyboardDelegate.js b/src/_utils/delegate/keyboardDelegate.js
index 293771bf4..656c2f32e 100644
--- a/src/_utils/delegate/keyboardDelegate.js
+++ b/src/_utils/delegate/keyboardDelegate.js
@@ -1,4 +1,5 @@
 import { KEY_CODE } from '../dom/key-code'
+import { on } from 'evtd'
 
 class KeyboardDelegate {
   constructor () {
@@ -6,7 +7,7 @@ class KeyboardDelegate {
     this.ctrlPressed = false
     this.commandPressed = false
     this.handlerInfoList = []
-    window.addEventListener('keydown', e => {
+    on('keydown', window, e => {
       switch (e.keyCode) {
         case KEY_CODE.SHIFT:
           this.shiftPressed = true
@@ -32,7 +33,7 @@ class KeyboardDelegate {
         }
       })
     })
-    window.addEventListener('keyup', e => {
+    on('keyup', window, e => {
       switch (e.keyCode) {
         case KEY_CODE.SHIFT:
           this.shiftPressed = false
diff --git a/src/dropdown/src/Dropdown.js b/src/dropdown/src/Dropdown.js
index ff3a0e7ec..9b7c751f3 100644
--- a/src/dropdown/src/Dropdown.js
+++ b/src/dropdown/src/Dropdown.js
@@ -189,8 +189,8 @@ export default {
       keyboardDelegate.registerHandler(KEY_CODE.LEFT, 'keydown', this.handleKeyDownLeft, {
         preventDefault: true
       })
-      keyboardDelegate.registerHandler(KEY_CODE.ENTER, 'keyup', this.handleKeyUpEnter)
       keyboardDelegate.registerHandler(KEY_CODE.ESC, 'keydown', this.handleKeyDownEsc)
+      keyboardDelegate.registerHandler(KEY_CODE.ENTER, 'keyup', this.handleKeyUpEnter)
     },
     unregisterKeyboardOperations () {
       if (!this.keyboardHandlerRegistered) return
diff --git a/src/scrollbar/src/ScrollBar.vue b/src/scrollbar/src/ScrollBar.vue
index 294370c28..c1a853a9a 100644
--- a/src/scrollbar/src/ScrollBar.vue
+++ b/src/scrollbar/src/ScrollBar.vue
@@ -100,6 +100,10 @@
 import {
   ref
 } from 'vue'
+import {
+  on,
+  off
+} from 'evtd'
 import {
   VResizeObserver
 } from 'vueuc'
@@ -255,8 +259,8 @@ export default {
   beforeUnmount () {
     window.clearTimeout(this.xBarVanishTimerId)
     window.clearTimeout(this.yBarVanishTimerId)
-    window.removeEventListener('mousemove', this.handleYScrollMouseMove, true)
-    window.removeEventListener('mouseup', this.handleYScrollMouseUp, true)
+    off('mousemove', window, this.handleYScrollMouseMove, true)
+    off('mouseup', window, this.handleYScrollMouseUp, true)
   },
   mounted () {
     // if container exist, it always can't be resolved when scrollbar is mounted
@@ -431,8 +435,8 @@ export default {
       e.preventDefault()
       e.stopPropagation()
       this.xBarPressed = true
-      window.addEventListener('mousemove', this.handleXScrollMouseMove)
-      window.addEventListener('mouseup', this.handleXScrollMouseUp)
+      on('mousemove', window, this.handleXScrollMouseMove, true)
+      on('mouseup', window, this.handleXScrollMouseUp, true)
       this.memoXLeft = this.containerScrollLeft
       this.memoMouseX = e.clientX
     },
@@ -451,8 +455,8 @@ export default {
     handleXScrollMouseUp (e) {
       e.preventDefault()
       e.stopPropagation()
-      window.removeEventListener('mousemove', this.handleXScrollMouseMove)
-      window.removeEventListener('mouseup', this.handleXScrollMouseUp)
+      off('mousemove', window, this.handleXScrollMouseMove, true)
+      off('mouseup', window, this.handleXScrollMouseUp, true)
       this.xBarPressed = false
       this.sync()
       if (!this.mergedContainerRef().contains(e.target)) {
@@ -463,8 +467,8 @@ export default {
       e.preventDefault()
       e.stopPropagation()
       this.yBarPressed = true
-      window.addEventListener('mousemove', this.handleYScrollMouseMove, true)
-      window.addEventListener('mouseup', this.handleYScrollMouseUp, true)
+      on('mousemove', window, this.handleYScrollMouseMove, true)
+      on('mouseup', window, this.handleYScrollMouseUp, true)
       this.memoYTop = this.containerScrollTop
       this.memoMouseY = e.clientY
     },
@@ -487,8 +491,8 @@ export default {
         onScrollEnd
       } = this
       if (onScrollEnd) onScrollEnd()
-      window.removeEventListener('mousemove', this.handleYScrollMouseMove, true)
-      window.removeEventListener('mouseup', this.handleYScrollMouseUp, true)
+      off('mousemove', window, this.handleYScrollMouseMove, true)
+      off('mouseup', window, this.handleYScrollMouseUp, true)
       this.yBarPressed = false
       this.sync()
       if (!this.mergedContainerRef().contains(e.target)) {