JavaScript Element copy Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word COPY

Definition

In JavaScript, the copy event fires when the user starts a copy action through the browser UI (MDN). The default action copies the current selection (if any) to the clipboard.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for copy. Start with this line.

JavaScript
addEventListener("copy", fn)
CallWhat it does
addEventListener("copy", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("copy", …) — no import required.

Library declarations
JavaScript
addEventListener("copy", fn)

Parameters

ParameterDescription
Event nameRequired. "copy"
Handler propOptional. oncopy

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Copy Selection as Uppercase (MDN)

Rewrite clipboard text with setData + preventDefault.

JavaScript
const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData(
    "text/plain",
    selection.toString().toUpperCase()
  );
  event.preventDefault();
});
Try It Yourself

How It Works

  1. Listen on the source. The copy gesture targets that element.
  2. Read the selection. getSelection().toString() is the highlighted text.
  3. Write clipboard data. setData("text/plain", …) sets your payload.
  4. Cancel the default. So the browser does not copy the raw selection instead.

Example 2 — Log When the User Copies

Observe the event without changing clipboard contents.

JavaScript
document.addEventListener("copy", () => {
  console.log("User copied something");
});
Try It Yourself

How It Works

  1. Listen on document. Catches copy from nested elements (bubbles).
  2. Do not call preventDefault. Default selection copy still runs.
  3. Use for analytics / UI tips — not for reading clipboard secrets.
  4. Still cannot read what was copied via clipboardData.getData here (MDN).

Example 3 — Block Copy on an Element

Cancel the default action so nothing is copied from that control.

JavaScript
const secret = document.getElementById("secret");

secret.addEventListener("copy", (event) => {
  event.preventDefault();
  console.log("Copy blocked");
});
Try It Yourself

How It Works

  1. Target one element. Only that control’s copy default is canceled.
  2. Call preventDefault(). Stops the browser from placing the selection on the clipboard.
  3. Not a security guarantee. Users can still screenshot or view source — treat as UX, not DRM.
  4. Prefer clear UI if copy is intentionally disabled (accessibility).
Compatibility

Browser Support

Element copy is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

copy

Fires when the user initiates a copy action through the browser UI.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
copy Excellent

Bottom line: Use copy to observe or customize the user’s copy gesture. Write with clipboardData.setData + preventDefault; do not expect to read the clipboard in this handler.

Frequently Asked Questions

It fires when the user starts a copy action through the browser UI (for example Ctrl+C / Cmd+C or Edit → Copy). The default action copies the current selection to the clipboard (MDN).
No. MDN marks Element copy as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A ClipboardEvent. The important property is clipboardData, which you can write to with setData(format, data).
No. MDN: a copy handler cannot read clipboard data. You can write with setData after cancelling the default action, but reading is restricted.
Call event.clipboardData.setData("text/plain", yourText) and event.preventDefault() so the browser does not copy the raw selection instead.
No. You can dispatch a synthetic copy event, but that alone will not put data on the system clipboard (MDN).

Next: cut

Learn the Element event fired when the user cuts content.

cut tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element contextmenu Event JavaScript Element cut Event