Deno 中的事件监听实例解析-JavaScript中文网-JavaScript教程资源分享门户

Deno 是一个用于 JavaScript 和 TypeScript 运行时的现代化、安全的环境。与 Node.js 不同，Deno 原生支持 TypeScript，具备更强的安全性，更好的开发体验。

在 Deno 中，事件监听是一个非常重要的部分。本文将详细介绍 Deno 中的事件监听，包括如何使用 Deno 内置的事件监听器和如何自定义事件监听器。

Deno 内置的事件监听器

Deno 中内置了一个 Emitter 类，用于实现事件的监听和触发。Emitter 类继承了 Deno.EventTarget，所以它也具备了 EventTarget 的一些基本特性。下面我们来看一个简单的例子：

// javascriptcn.com 代码示例
import { Emitter } from "deno";

const eventEmitter = new Emitter();

eventEmitter.addEventListener("myEvent", (event) => {
  console.log(event);
});

eventEmitter.emit("myEvent", "Hello, Deno!");

在这个例子中，我们在 eventEmitter 中添加了一个 myEvent 的事件监听器，并传入了一个回调函数。当调用 eventEmitter.emit("myEvent", "Hello, Deno!") 时，回调函数就会被触发，输出 "Hello, Deno!"。

除了可以传递简单的数据，还可以传递一个自定义的事件参数。例如：

// javascriptcn.com 代码示例
interface CustomEvent {
  message: string;
}

const eventEmitter = new Emitter<CustomEvent>();

eventEmitter.addEventListener("myEvent", (event) => {
  console.log(event.message);
});

eventEmitter.emit("myEvent", { message: "Hello, Deno!" });

在这个例子中，我们定义了一个 CustomEvent 接口，用于包装事件参数。在添加事件监听器和触发事件时，都需要传递 CustomEvent 类型的数据。这样就可以更灵活地传递数据，同时保证类型安全。

自定义事件监听器

除了使用内置的 Emitter 类，我们也可以创建自定义的事件监听器。下面我们来看一个例子：

// javascriptcn.com 代码示例
interface CustomEvent {
  message: string;
}

class MyEmitter {
  private listeners: {
    [event: string]: ((event: CustomEvent) => void)[];
  };

  constructor() {
    this.listeners = {};
  }

  addEventListener(event: string, callback: (event: CustomEvent) => void) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }

  removeEventListener(event: string, callback: (event: CustomEvent) => void) {
    if (!this.listeners[event]) {
      return;
    }
    this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback);
  }

  emit(event: string, data: CustomEvent) {
    if (!this.listeners[event]) {
      return;
    }
    for (const callback of this.listeners[event]) {
      callback(data);
    }
  }
}

const myEmitter = new MyEmitter();

myEmitter.addEventListener("myEvent", (event) => {
  console.log(event.message);
});

myEmitter.emit("myEvent", { message: "Hello, Deno!" });

在这个例子中，我们使用了一个名为 MyEmitter 的自定义事件监听器。MyEmitter 中有三个方法：addEventListener、removeEventListener、emit。其中addEventListener用于添加事件监听器，removeEventListener用于删除事件监听器，emit用于触发事件。

与内置的 Emitter 类类似，MyEmitter 也可以传递自定义的事件参数。在 addEventListener、removeEventListener、emit 中，我们都需要传递 CustomEvent 类型的数据，以保证类型安全。

总结

本文介绍了 Deno 中的事件监听器，包括内置的 Emitter 类和自定义的事件监听器。通过本文的学习，我们可以更好地理解事件监听器的工作方式，并学会了如何在 Deno 中使用事件监听器。事件监听器在前端开发中非常常见，希望本文能够对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653d095c7d4982a6eb6f109b