You need to enable JavaScript to run this app.
导航
addEventListener
最近更新时间:2024.05.17 16:14:00首次发布时间:2023.02.15 19:04:53

介绍

该API用于注册事件监听器,即触发指定的事件时,将执行指定的回调函数。边缘函数中最常见的是FetchEvent,通过注册 fetch 事件监听器,可以生成一个 HTTP 请求事件 FetchEvent,从而实现对 HTTP 请求的处理。

addEventListener(type, listener)

参数说明

  • type:表示事件名称的字符串
  • listener:表示事件处理的回调函数

用法

您可以多次调用addEventListener,用来注册多个关于同一个或者不同事件的监听器。

  • 每一个回调函数将按照注册顺序执行。
  • 对于同一个事件,如果回调函数没有返回结果,那么接下来的回调函数将会继续执行,直到回调函数返回了结果时停止,后续的回调函数将不会被执行。例如,当 FetchEvent 被触发时,如果回调函数调用了 respondWith,那么就认为返回了结果。
  • 如果所有的回调函数均未返回结果,运行时将会抛出错误。
  • 每个事件默认最多设置16个回调函数。

示例

addEventListener('fetch', handle1);
addEventListener('fetch', handle2);
addEventListener('fetch', handle3);

async function handle1(event){
  // 回调函数1 打印"callback1 has been triggered"
  console.log("callback1 has been triggered");
  }

async function handle2(event){
  // 回调函数2 打印"callback2 been triggered"
  console.log("callback2 has been triggered");
      event.respondWith(new Response("callback2 has been triggered"));// 这个调用表示该回调函数使用event.respondWith()方法来进行响应操作,后续的回调函数将不会被执行
    });
  }

async function handle3(event){
  // 回调函数3 根据代码的结构,该回调函数永远不会被执行,因为在前面的代码中,事件的响应操作已经被处理了。
  console.log("这个永远不会被显示");
  }