js 实现 eventemitter

EventEmitter 是 Node.js 中一个核心模块，用于实现自定义事件。可以通过以下代码实现：

const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

myEmitter.on('event', () => {
  console.log('事件被触发！');
});

myEmitter.emit('event');

在上面的代码中，我们继承了 EventEmitter，创建了一个名为 `myEmitter` 的实例。然后通过 `myEmitter.on` 方法监听 'event' 事件，通过 `myEmitter.emit` 触发该事件。当事件被触发时，会输出 "事件被触发！"。

相关问题

react eventemitter

React中的EventEmitter是一个事件触发器，用于在组件之间传递和处理事件。它是通过React的事件系统来实现的。下面是一个使用EventEmitter的示例：

1. 首先，你需要导入React和EventEmitter：

import React from "react";
import { EventEmitter } from "events";

2. 创建EventEmitter的实例：

const DemoEvent = new EventEmitter();

3. 在需要触发事件的组件中，使用EventEmitter的emit方法触发事件：

DemoEvent.emit("eventName", eventData);

其中，"eventName"是事件的名称，eventData是传递给事件处理函数的数据。

4. 在需要监听事件的组件中，使用EventEmitter的on方法来注册事件处理函数：

DemoEvent.on("eventName", eventHandler);

其中，"eventName"是要监听的事件的名称，eventHandler是事件处理函数。

5. 当事件被触发时，注册的事件处理函数将被调用，并且可以访问传递给事件的数据。

下面是一个完整的示例：

// 导入React和EventEmitter
import React from "react";
import { EventEmitter } from "events";

// 创建EventEmitter实例
const DemoEvent = new EventEmitter();

// 触发事件的组件
const TriggerComponent = () => {
  const handleClick = () => {
    DemoEvent.emit("customEvent", "Hello, World!");
  };

  return <button onClick={handleClick}>触发事件</button>;
};

// 监听事件的组件
const ListenerComponent = () => {
  const handleEvent = (data) => {
    console.log(data); // 输出：Hello, World!
  };

  React.useEffect(() => {
    DemoEvent.on("customEvent", handleEvent);

    return () => {
      DemoEvent.off("customEvent", handleEvent);
    };
  }, []);

  return <div>监听事件的组件</div>;
};

// 在父组件中使用TriggerComponent和ListenerComponent
const App = () => {
  return (
    <div>
      <TriggerComponent />
      <ListenerComponent />
    </div>
  );
};

export default App;

这个示例中，当点击"触发事件"按钮时，会触发名为"customEvent"的事件，并传递字符串"Hello, World!"作为数据。监听事件的组件会接收到这个数据并将其打印到控制台上。

eventemitter vue

EventEmitter是一个事件派发器，在前端开发中非常常见的编程模型。它的作用是负责监听某个事件，并在该事件发生时调用相应的监听函数。

与此类似，在Vue中也有类似的概念，即"watch"。在Vue中，可以使用"watch"来监听一个值的变化，并在值发生变化时执行相应的操作。这类似于前面提到的使用EventEmitter来监听事件并做出相应的响应。

总结起来，EventEmitter和Vue中的"watch"都是用来监听事件或值的变化，并在事件或值发生变化时执行相应操作的机制。它们可以帮助我们实现更加灵活和响应式的前端开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [前端EventEmitter,发布/订阅模式,Vue双向数据绑定](https://blog.csdn.net/tinfengyee/article/details/106084583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [react、vue 使用node.js eventEmitter跨组件传参（还可以用来监听值的变化处理一些事情）](https://blog.csdn.net/weixin_44058725/article/details/106325927)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]