From a2ebe9391b875c7e642220259519eb24a545f34f Mon Sep 17 00:00:00 2001
From: wuxue <wuxue@finchina.com>
Date: Tue, 16 Jul 2024 14:52:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20review=E5=90=8E=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/src/useEventListener/demo/demo3.tsx | 29 +++++++++++++++++++
 .../hooks/src/useEventListener/index.en-US.md |  4 +++
 packages/hooks/src/useEventListener/index.ts  |  8 ++---
 .../hooks/src/useEventListener/index.zh-CN.md |  4 +++
 4 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 packages/hooks/src/useEventListener/demo/demo3.tsx

diff --git a/packages/hooks/src/useEventListener/demo/demo3.tsx b/packages/hooks/src/useEventListener/demo/demo3.tsx
new file mode 100644
index 0000000000..efc314083b
--- /dev/null
+++ b/packages/hooks/src/useEventListener/demo/demo3.tsx
@@ -0,0 +1,29 @@
+/**
+ * title: Listen to multiple events.
+ * desc: Mouse hover or over the button to preview.
+ *
+ * title.zh-CN: 监听多个事件
+ * desc.zh-CN: 鼠标移入移出按钮查看效果。
+ */
+
+import React, { useRef, useState } from 'react';
+import { useEventListener } from 'ahooks';
+
+export default () => {
+  const ref = useRef(null);
+  const [value, setValue] = useState('');
+
+  useEventListener(
+    ['mouseenter', 'mouseleave'],
+    (ev) => {
+      setValue(ev.type);
+    },
+    { target: ref },
+  );
+
+  return (
+    <button ref={ref} type="button">
+      You Option is {value}
+    </button>
+  );
+};
diff --git a/packages/hooks/src/useEventListener/index.en-US.md b/packages/hooks/src/useEventListener/index.en-US.md
index e5df06929c..04823a929a 100644
--- a/packages/hooks/src/useEventListener/index.en-US.md
+++ b/packages/hooks/src/useEventListener/index.en-US.md
@@ -17,6 +17,10 @@ Use addEventListener elegant by Hook.
 
 <code src="./demo/demo2.tsx" />
 
+### Listen for multiple events
+
+<code src="./demo/demo3.tsx" />
+
 ## API
 
 ```typescript
diff --git a/packages/hooks/src/useEventListener/index.ts b/packages/hooks/src/useEventListener/index.ts
index bf8385af3c..0848466c95 100644
--- a/packages/hooks/src/useEventListener/index.ts
+++ b/packages/hooks/src/useEventListener/index.ts
@@ -64,8 +64,8 @@ function useEventListener(eventName: string | string[], handler: noop, options:
 
       const eventNameArray = Array.isArray(eventName) ? eventName : [eventName];
 
-      eventNameArray.forEach((eventName) => {
-        targetElement.addEventListener(eventName, eventListener, {
+      eventNameArray.forEach((event) => {
+        targetElement.addEventListener(event, eventListener, {
           capture: options.capture,
           once: options.once,
           passive: options.passive,
@@ -73,8 +73,8 @@ function useEventListener(eventName: string | string[], handler: noop, options:
       });
 
       return () => {
-        eventNameArray.forEach((eventName) => {
-          targetElement.removeEventListener(eventName, eventListener, {
+        eventNameArray.forEach((event) => {
+          targetElement.removeEventListener(event, eventListener, {
             capture: options.capture,
           });
         });
diff --git a/packages/hooks/src/useEventListener/index.zh-CN.md b/packages/hooks/src/useEventListener/index.zh-CN.md
index 2c8763629a..05506c56b1 100644
--- a/packages/hooks/src/useEventListener/index.zh-CN.md
+++ b/packages/hooks/src/useEventListener/index.zh-CN.md
@@ -17,6 +17,10 @@ nav:
 
 <code src="./demo/demo2.tsx" />
 
+### 监听多个事件
+
+<code src="./demo/demo3.tsx" />
+
 ## API
 
 ```typescript