From 6c65e4c3e6130fe260c248af8e4f79eb5a8a0ebd Mon Sep 17 00:00:00 2001 From: Paul Jacks Date: Sat, 20 Jan 2024 05:27:32 +0100 Subject: [PATCH] Adding an example to ProgressEvent constructor (#31334) * adding-a-event-progress-constructor-example * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Joshua Chen --- .../api/progressevent/progressevent/index.md | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/files/en-us/web/api/progressevent/progressevent/index.md b/files/en-us/web/api/progressevent/progressevent/index.md index 494076a1aa2858b..853dc24b1fe8840 100644 --- a/files/en-us/web/api/progressevent/progressevent/index.md +++ b/files/en-us/web/api/progressevent/progressevent/index.md @@ -44,6 +44,28 @@ new ProgressEvent(type, options) A new {{domxref("ProgressEvent")}} object. +## Example + +The example demonstrates how a `ProgressEvent` is built using a constructor. This is particularly useful for tracking the progress of processes like file uploads, downloads, or any long-running tasks. + +```js +function updateProgress(loaded, total) { + const progressEvent = new ProgressEvent("progress", { + lengthComputable: true, + loaded: loaded, + total: total, + }); + + document.dispatchEvent(progressEvent); +} + +document.addEventListener("progress", (event) => { + console.log(`Progress: ${event.loaded}/${event.total}`); +}); + +updateProgress(50, 100); +``` + ## Specifications {{Specifications}}