EventTarget

The EventTarget interface of Azion Runtime: its constructor and the methods that add and remove event listeners and dispatch events.

Last updated

View as Markdown Agent setup

The EventTarget interface represents an object that receives events and runs the listeners registered for them. Every event target implements its three methods: addEventListener(), removeEventListener(), and dispatchEvent(). For more information, refer to EventTarget on MDN Web Docs.

In a function, globalThis is an event target. The global addEventListener registers the fetch handler on it, and a listener for a custom event type runs when globalThis.dispatchEvent() dispatches that type. Create your own event targets to build objects that dispatch and listen for custom events while a function handles a request. Add and remove listeners at run time to control which handlers react to an event.

In a browser, the most common event targets are elements and their children, Document, and Window. Objects such as XMLHttpRequest, AudioNode, and AudioContext are event targets too. Elements, documents, and windows also accept event handlers through onevent properties and attributes. A function has no document object: a reference to it throws ReferenceError: document is not defined.

Under azion dev, CustomEvent is not defined, globalThis is not an EventTarget, and globalThis.dispatchEvent is not a function. Event targets you construct behave the same in both environments.

Constructor

new EventTarget()

EventTarget() creates an event target with no listeners. A class that extends EventTarget inherits the three methods: an instance of class Bus extends EventTarget {} runs the listeners added to it.

Methods

MethodDescription
target.addEventListener(type, listener, options)Registers listener for events of type. With { once: true } as options, the listener runs on the first dispatch only.
target.removeEventListener(type, listener)Removes the listener registered with the same type and listener. Later dispatches of type do not run it.
target.dispatchEvent(event)Dispatches event to the listeners registered for its type. Returns false when event is cancelable and a listener calls preventDefault().

dispatchEvent() takes an Event, such as new Event('ping', { cancelable: true }), or a CustomEvent. A listener reads the detail value of a CustomEvent from event.detail.

Example

This handler registers a listener on an event target, dispatches the event, removes the listener, and dispatches the event again. It returns the number of times the listener ran and the event types it received:

JavaScript
01export default {
02 async fetch(request, env, ctx) {
03 const target = new EventTarget();
04 const seen = [];
05 const handler = (event) => seen.push(event.type);
06 target.addEventListener('ping', handler);
07 target.dispatchEvent(new Event('ping'));
08 target.removeEventListener('ping', handler);
09 target.dispatchEvent(new Event('ping'));
10 return Response.json({ calls: seen.length, seen });
11 },
12};

The function returns these values. The listener runs once, because the second dispatch comes after removeEventListener():

JSON
01{
02 "calls": 1,
03 "seen": [
04 "ping"
05 ]
06}
addEventListener

How a function registers its fetch handler on the global event target.

FetchEvent

The event that the runtime dispatches for each incoming request.

Handlers

The handler shapes a function can export to answer a request.

Web APIs

The other Web APIs that Azion Runtime supports.