[2024.10.10] event.preventDefault & event stopPropagation

Undo & Redo 단축키 작업 중 이벤트 처리 방지

event.preventDefault()와 event.stopPropagation()은 이벤트가 발생했을 때, 그 이벤트의 기본 동작과 전파를 제어하기 위해 사용된다.

이를 통해 단축키로 Ctrl + z 또는 Ctrl + shift + z 를 사용할 때, 다른 기본 동작이나 불필요한 이벤트 처리를 방지할 수 있다.

 

1. event.preventDefault()
   • 이 메서드는 이벤트의 기본 동작을 막는 역할을 한다.
   • 예를 들어, 브라우저에서 Ctrl + z는 기본적으로 "마지막 작업 되돌리기" 기능을 수행한다. 그러나, 이 경우에 애플리케이션에서 커스텀한 undo 로직을 처리해야 하므로, 브라우저의 기본 undo 동작을 막아야 한다.
   • 즉, 이 메소드로 인해 브라우저가 원래 수행하려고 했던 동작을 차단하고, 대신 사용자 정의 로직을 실행할 수 있도록 한다.
2. event.stopPropagation()
   • 이 메서드는 이벤트가 부모 노드로 전파되는 것을 막는다.
   • 이벤트가 전파되지 않도록 함으로써, 다른 요소들이 이 이벤트에 반응하지 않도록 할 수 있다.
   • 이를 통해 Ctrl + z 또는 Ctrl + shift + z 가 특정 UI 요소에서 발생했을 때, 그 이벤트가 상위 요소들로 전파되어 의도하지 않은 동작을 일으키지 않도록 한다.