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 March 2017.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ko/web/api/element/index.md)

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

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

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

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

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

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

예제

HTML

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

JS

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();
});

결과

명세

Specification
Clipboard API and events
# clipboard-event-copy
HTML Standard
# handler-oncopy

브라우저 호환성

BCD tables only load in the browser

같이 보기