Element: copy 이벤트

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

copy 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.

버블링	예
취소 가능	예
인터페이스	`ClipboardEvent`
이벤트 처리기 속성	`oncopy`

이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사하는 것입니다.

copy 이벤트 처리기는 이벤트의ClipboardEvent.clipboardData 속성에 대해setData(format, data) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고,event.preventDefault()를 호출해 기본 동작을 취소할 수도 있습니다.

그러나, 처리기에서 클립보드 데이터를 읽을 수는 없습니다.

합성copy 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드에 영향을 줄 수 없습니다.

예제

HTML

html

<div contenteditable="true">  이 상자에서 텍스트를 복사해보세요...</div><div contenteditable="true">...여기에 붙여 넣어 보세요.</div>

div.source,div.target {  border: 1px solid gray;  margin: 0.5rem;  padding: 0.5rem;  height: 1rem;  background-color: #e9eef1;}

JS

const source = document.querySelector("div.source");source.addEventListener("copy", (event) => {  const selection = document.getSelection();  const reversed = Array.from(selection.toString()).reverse().join("");  event.clipboardData.setData("text/plain", reversed);  event.preventDefault();});