JavaScript Element cut Event

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

Definition

In JavaScript, the cut event fires when the user starts a cut action through the browser UI (MDN). The default action copies the selection to the clipboard and removes it from the document.

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

Syntax

Listen for cut. Start with this line.

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

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

Library declarations
JavaScript
addEventListener("cut", fn)

Parameters

ParameterDescription
Event nameRequired. "cut"
Handler propOptional. oncut

Return Value

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

JavaScript Examples

Example 1 — Cut Selection as Uppercase (MDN)

Rewrite clipboard text, delete the selection, then cancel the default.

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

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

How It Works

  1. Listen on an editable source. Cut needs something that can lose text.
  2. Read the selection and write uppercase text with setData.
  3. Call deleteFromDocument(). Emulates the remove half of cut.
  4. Call preventDefault(). Stops the browser’s default cut (MDN).

Example 2 — Log When the User Cuts

Observe the event without changing clipboard or document behavior.

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

How It Works

  1. Listen on document. Catches cut from nested editable fields (bubbles).
  2. Do not call preventDefault. Default cut (copy + remove) still runs.
  3. Use for analytics / tips — not for reading clipboard secrets.
  4. Still cannot read clipboard data in this handler (MDN).

Example 3 — Block Cut on an Element

Cancel the default so nothing is cut from that control.

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

field.addEventListener("cut", (event) => {
  event.preventDefault();
  console.log("Cut blocked");
});
Try It Yourself

How It Works

  1. Target one control. Only that element’s cut default is canceled.
  2. Call preventDefault(). Stops clipboard write and removal.
  3. Text stays put. That is the intentional side effect of canceling cut.
  4. Not DRM. Users can still copy via other means — treat as UX control.
Compatibility

Browser Support

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

✓ Baseline · Widely available

cut

Fires when the user initiates a cut 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
cut Excellent

Bottom line: Customize with setData + deleteFromDocument + preventDefault. Remember: canceling cut also cancels the automatic removal of the selection.

Frequently Asked Questions

It fires when the user starts a cut action through the browser UI (for example Ctrl+X / Cmd+X or Edit → Cut). The default action copies the selection to the clipboard and removes it from the document (MDN).
No. MDN marks Element cut 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).
Cancelling the default also stops the browser from removing the selection from the document. If you still want a cut-like result, call selection.deleteFromDocument() yourself after setData (MDN).
Yes. The cut event can still fire, but the event object may contain no clipboard data when the content is not editable (MDN).
No. Like copy, a cut handler cannot read clipboard data. You can write with setData after cancelling the default action.

Next: dblclick

Learn the Element event fired when a pointing device is double-clicked.

dblclick 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 copy Event JavaScript Element dblclick Event