docs: add useEventListener

Author: gaoachao

README.md

@@ -67,6 +67,7 @@
     <br/>
 - [**Lifecycles**](./docs/en/lifecycles/README.md)
   - [`useEffectOnce`](./docs/en/lifecycles/useEffectOnce.md) &mdash; a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.
+  - [`useEventListener`](./docs/en/lifecycles/useEventListener.md) &mdash; a hook that helps you add a global event listener as early as possible.
   - [`useLifecycles`](./docs/en/lifecycles/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
   - [`useMountedState`](./docs/en/lifecycles/useMountedState.md) and [`useUnmountPromise`](./docs/en/lifecycles/useUnmountPromise.md) &mdash; track if component is mounted.
   - [`useUnmount`](./docs/en/lifecycles/useUnmount.md) &mdash; calls `unmount` callbacks.

README.zh-CN.md

@@ -67,6 +67,7 @@
     <br/>
 - [**生命周期**](./docs/zh/lifecycles/README.md)
   - [`useEffectOnce`](./docs/zh/lifecycles/useEffectOnce.md) &mdash; 仅运行一次的 [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect)。
+  - [`useEventListener`](./docs/en/lifecycles/useEventListener.md) &mdash; 用于尽早添加全局事件监听器的 Hook。
   - [`useLifecycles`](./docs/zh/lifecycles/useLifecycles.md) &mdash; 调用 `mount` 和 `unmount` 回调。
   - [`useMountedState`](./docs/zh/lifecycles/useMountedState.md) 和 [`useUnmountPromise`](./docs/zh/lifecycles/useUnmountPromise.md) &mdash; 跟踪组件是否已挂载。
   - [`useUnmount`](./docs/zh/lifecycles/useUnmount.md) &mdash; 调用 `unmount` 回调。

docs/en/lifecycles/useEventListener.md

@@ -0,0 +1,37 @@
+# useEventListener
+
+A hook that helps you add a global event listener as early as possible.
+
+## Usage
+
+```tsx
+import { useEventListener } from "@lynx-js/react-use";
+
+const App = () => {
+  // Listen to the 'exposure' event
+  useEventListener("exposure", (e) => {
+    console.log("exposure", e);
+  });
+
+  // Listen to the 'disexposure' event
+  useEventListener("disexposure", (e) => {
+    console.log("disexposure", e);
+  });
+
+  return (
+    <view
+      style={{ width: "100px", height: "100px", backgroundColor: "red" }}
+      exposure-id="a"
+    />
+  );
+};
+```
+
+## Type Declarations
+
+```ts
+declare const useEventListener: (
+  eventName: string,
+  listener: (...args: any[]) => void
+) => void;
+```

docs/en/mts/useVelocity.md

@@ -16,9 +16,10 @@ const Demo = () => {
 
   return (
     <view
-      onTouchStart={handleTouchStartMT}
-      onTouchMove={handleTouchMoveMT}
-      onTouchEnd={() => {
+      main-thread:bindtouchstart={handleTouchStartMT}
+      main-thread:bindtouchmovee={handleTouchMoveMT}
+      main-thread:bindtouchend={() => {
+        "main thread";
         const { velocity, direction } = getVelocity();
         console.log(`Velocity: ${velocity}px/s, Direction: ${direction}`);
       }}

docs/zh/lifecycles/useEventListener.md

@@ -0,0 +1,37 @@
+# useEventListener
+
+用于尽早添加全局事件监听器的 Hook。
+
+## 示例
+
+```tsx
+import { useEventListener } from "@lynx-js/react-use";
+
+const App = () => {
+  // 监听 'exposure' (曝光) 事件
+  useEventListener('exposure', (e) => {
+    console.log("exposure", e);
+  });
+
+  // 监听 'disexposure' (反曝光/消失) 事件
+  useEventListener('disexposure', (e) => {
+    console.log("disexposure", e);
+  });
+
+  return (
+    <view
+      style={{ width: '100px', height: '100px', backgroundColor: 'red' }}
+      exposure-id='a'
+    />
+  );
+};
+```
+
+## 类型定义
+
+```ts
+declare const useEventListener: (
+  eventName: string,
+  listener: (...args: any[]) => void
+) => void;
+```

docs/zh/mts/useVelocity.md

@@ -16,9 +16,10 @@ const Demo = () => {
 
   return (
     <view
-      onTouchStart={handleTouchStartMT}
-      onTouchMove={handleTouchMoveMT}
-      onTouchEnd={() => {
+      main-thread:bindtouchstart={handleTouchStartMT}
+      main-thread:bindtouchmovee={handleTouchMoveMT}
+      main-thread:bindtouchend={() => {
+        "main thread";
         const { velocity, direction } = getVelocity();
         console.log(`Velocity: ${velocity}px/s, Direction: ${direction}`);
       }}