files/en-us/web/api/element/copy_event/index.md
{{APIRef("Clipboard API")}}
The copy event of the Clipboard API fires when the user initiates a copy action through the browser's user interface.
The event's default action is to copy the selection (if any) to the clipboard.
A handler for this event can modify the clipboard contents by calling {{domxref("DataTransfer.setData", "setData(format, data)")}} on the event's {{domxref("ClipboardEvent.clipboardData")}} property, and cancelling the event's default action using {{domxref("Event/preventDefault", "event.preventDefault()")}}.
However, the handler cannot read the clipboard data.
It's possible to construct and dispatch a synthetic copy event, but this will not affect the system clipboard.
This event bubbles up the DOM tree, eventually to {{domxref("Document")}} and {{domxref("Window")}}, is cancelable and is composed.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("copy", (event) => { })
oncopy = (event) => { }
A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("ClipboardEvent")}}
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
div.source,
div.target {
border: 1px solid gray;
margin: 0.5rem;
padding: 0.5rem;
height: 1rem;
background-color: #e9eef1;
}
const source = document.querySelector("div.source");
source.addEventListener("copy", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
event.preventDefault();
});
{{ EmbedLiveSample('Live_example', '100%', '120px') }}
{{Specifications}}
{{Compat}}