refactor(utils): drop off/on/once, use EventListener instead (element-plus#8960)

* refactor(utils): drop off/on/once, use EventListener instead

* refactor(utils): use useEventListener

* refactor(utils): use useEventListener

* style(components): [roving-focus-group] useEventListener  pass ref

Author: Chuck-Lau

packages/components/color-picker/src/draggable.ts

@@ -1,5 +1,4 @@
 import { isClient } from '@vueuse/core'
-import { off, on } from '@element-plus/utils'
 
 let isDragging = false
 
@@ -17,10 +16,10 @@ export default function (element: HTMLElement, options: IOptions) {
   }
 
   const upFn = function (event: Event) {
-    off(document, 'mousemove', moveFn)
-    off(document, 'mouseup', upFn)
-    off(document, 'touchmove', moveFn)
-    off(document, 'touchend', upFn)
+    document.removeEventListener('mousemove', moveFn)
+    document.removeEventListener('mouseup', upFn)
+    document.removeEventListener('touchmove', moveFn)
+    document.removeEventListener('touchend', upFn)
     document.onselectstart = null
     document.ondragstart = null
 
@@ -34,16 +33,16 @@ export default function (element: HTMLElement, options: IOptions) {
     event.preventDefault()
     document.onselectstart = () => false
     document.ondragstart = () => false
-    on(document, 'mousemove', moveFn)
-    on(document, 'mouseup', upFn)
-    on(document, 'touchmove', moveFn)
-    on(document, 'touchend', upFn)
+    document.addEventListener('mousemove', moveFn)
+    document.addEventListener('mouseup', upFn)
+    document.addEventListener('touchmove', moveFn)
+    document.addEventListener('touchend', upFn)
 
     isDragging = true
 
     options.start?.(event)
   }
 
-  on(element, 'mousedown', downFn)
-  on(element, 'touchstart', downFn)
+  document.addEventListener('mousedown', downFn)
+  document.addEventListener('touchstart', downFn)
 }

packages/components/dropdown/src/useDropdown.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { computed, inject, ref } from 'vue'
-import { addClass, generateId, on } from '@element-plus/utils'
+import { addClass, generateId } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import type { Nullable } from '@element-plus/utils'
@@ -96,8 +96,8 @@ export const initDropdownDomEvent = (
   }
 
   function initEvent() {
-    on(triggerElm, 'keydown', handleTriggerKeyDown)
-    on(dropdownElm.value, 'keydown', handleItemKeyDown, true)
+    triggerElm?.addEventListener('keydown', handleTriggerKeyDown)
+    dropdownElm.value?.addEventListener('keydown', handleItemKeyDown, true)
   }
 
   function initDomOperation() {

packages/components/message-box/src/index.vue

@@ -178,8 +178,6 @@ import {
   TypeComponents,
   TypeComponentsMap,
   isValidComponentSize,
-  off,
-  on,
 } from '@element-plus/utils'
 import { ElIcon } from '@element-plus/components/icon'
 import ElFocusTrap from '@element-plus/components/focus-trap'
@@ -371,13 +369,13 @@ export default defineComponent({
     onMounted(async () => {
       await nextTick()
       if (props.closeOnHashChange) {
-        on(window, 'hashchange', doClose)
+        window.addEventListener('hashchange', doClose)
       }
     })
 
     onBeforeUnmount(() => {
       if (props.closeOnHashChange) {
-        off(window, 'hashchange', doClose)
+        window.removeEventListener('hashchange', doClose)
       }
     })
 

packages/components/roving-focus-group/src/roving-focus-group-impl.vue

@@ -7,16 +7,15 @@ import {
   computed,
   defineComponent,
   inject,
-  onBeforeUnmount,
-  onMounted,
   provide,
   readonly,
   ref,
   toRef,
   unref,
   watch,
 } from 'vue'
-import { composeEventHandlers, off, on } from '@element-plus/utils'
+import { useEventListener } from '@vueuse/core'
+import { composeEventHandlers } from '@element-plus/utils'
 import {
   ROVING_FOCUS_COLLECTION_INJECTION_KEY,
   rovingFocusGroupProps,
@@ -148,15 +147,7 @@ export default defineComponent({
       }
     )
 
-    onMounted(() => {
-      const rovingFocusGroupEl = unref(rovingFocusGroupRef)!
-      on(rovingFocusGroupEl, ENTRY_FOCUS_EVT, handleEntryFocus)
-    })
-
-    onBeforeUnmount(() => {
-      const rovingFocusGroupEl = unref(rovingFocusGroupRef)!
-      off(rovingFocusGroupEl, ENTRY_FOCUS_EVT, handleEntryFocus)
-    })
+    useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus)
   },
 })
 </script>

packages/components/tree/src/model/useKeydown.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import { onBeforeUnmount, onMounted, onUpdated, shallowRef, watch } from 'vue'
-import { off, on } from '@element-plus/utils'
+import { onMounted, onUpdated, shallowRef, watch } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { EVENT_CODE } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import type TreeStore from './tree-store'
@@ -19,11 +19,6 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
 
   onMounted(() => {
     initTabIndex()
-    on(el$.value, 'keydown', handleKeydown)
-  })
-
-  onBeforeUnmount(() => {
-    off(el$.value, 'keydown', handleKeydown)
   })
 
   onUpdated(() => {
@@ -110,6 +105,8 @@ export function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {
     }
   }
 
+  useEventListener(el$, 'keydown', handleKeydown)
+
   const initTabIndex = (): void => {
     treeItems.value = Array.from(
       el$.value.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`)

packages/utils/dom/event.ts

@@ -1,42 +1,3 @@
-/** @deprecated use `element.addEventListener` instead */
-export const on = (
-  element: HTMLElement | Document | Window | Element,
-  event: string,
-  handler: EventListenerOrEventListenerObject,
-  useCapture = false
-): void => {
-  if (element && event && handler) {
-    element?.addEventListener(event, handler, useCapture)
-  }
-}
-
-/** @deprecated use `element.addEventListener` instead */
-export const off = (
-  element: HTMLElement | Document | Window | Element,
-  event: string,
-  handler: EventListenerOrEventListenerObject,
-  useCapture = false
-): void => {
-  if (element && event && handler) {
-    element?.removeEventListener(event, handler, useCapture)
-  }
-}
-
-/** @deprecated use `element.addEventListener` instead */
-export const once = (
-  el: HTMLElement,
-  event: string,
-  fn: EventListener
-): void => {
-  const listener = function (this: any, ...args: any) {
-    if (fn) {
-      fn.apply(this, args)
-    }
-    off(el, event, listener)
-  }
-  on(el, event, listener)
-}
-
 export const composeEventHandlers = <E>(
   theirsHandler?: (event: E) => boolean | void,
   oursHandler?: (event: E) => void,