addEventListener

介绍

该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 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("这个永远不会被显示");
  }