Element: cut 이벤트
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 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 잘라내기를 했을 때 발생합니다.
사용자가 수정 불가능한 콘텐츠에 대해 잘라내기를 시도할 경우에도 cut 이벤트는 발생하지만, 데이터는 비어있을 것입니다.
| 버블링 | 예 |
|---|---|
| 취소 가능 | 예 |
| 인터페이스 | ClipboardEvent |
| 이벤트 처리기 속성 | oncut |
이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사한 후 문서에서 제거하는 것입니다.
cut 이벤트 처리기는 이벤트의 ClipboardEvent.clipboardData 속성에 대해 setData(format, data) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, event.preventDefault()를 호출해 기본 동작을 취소할 수도 있습니다.
기본 동작을 취소할 경우 잘라낸 영역을 문서에서 제거하지도 않는다는 점에 주의하세요. 따라서 기본 잘라내기 동작을 흉내내는 처리기를 구현하는 경우, 문서의 수정도 직접 해줘야 합니다.
처리기에서 클립보드 데이터를 읽을 수는 없습니다.
합성 cut 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드나 문서 내용에 영향을 줄 수 없습니다.
예제
HTML
<div class="source" contenteditable="true">
이 상자에서 텍스트를 잘라내 보세요...
</div>
<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
JS
const source = document.querySelector("div.source");
source.addEventListener("cut", (event) => {
const selection = document.getSelection();
const reversed = Array.from(selection.toString()).reverse().join("");
event.clipboardData.setData("text/plain", reversed);
selection.deleteFromDocument();
event.preventDefault();
});
결과
명세
| Specification |
|---|
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |
브라우저 호환성
BCD tables only load in the browser