[JavaScript] 이벤트를 취소하는 방법 세가지 (이벤트 전파 중단)

이벤트 취소를 위한 방법으로는

대표적으로 Event.preventDefault(), Event.stopPropagation(), Event.stopImmediatePropagation()이 있습니다.

 

사실 Event.preventDefault() 외에는 사용빈도가 높지 않기 때문에

세 개의 방법을 알고 있긴 했어도, 모호하게 알고만 있는 정도였는데

프로젝트 수행 중에 이미 해당 영역에 걸린 이벤트를 공통 스크립트를 통해 제어할 방법이 필요하여

검색 중에 이 내용에 대해 확실하게 정리해두는 게 좋을 거란 생각이 들었습니다.

 

 

 

1. Event.preventDefault();

 

이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 해당 이벤트를 취소합니다.

(event.cancelable을 사용하여 이벤트 취소 가능 여부를 확인할 수 있습니다.)

 

즉, 해당 이벤트만 취소하며, 상위 요소의 이벤트가 호출되는 것은 막지 않습니다.

 

---

2. Event.stopPropagation();

 

이벤트 캡쳐링과 버블링에 있어 해당 이벤트 이후의 전파를 막습니다.

 

즉, 해당 이벤트의 상위 요소에 걸린 이벤트가 호출되지 않습니다.

 

---

3. Event.stopImmediatePropagation();

 

해당 이벤트와 같은 레벨에 걸린 이벤트가 다른 리스너에서 불려지는 것을 막습니다.

 

즉, 현재 이벤트와 같은 레벨에 걸린 이벤트를 취소하며, 상위 요소의 이벤트가 호출되는 것도 막습니다.

 

 

---

번외. return false;

 

번외로 JQuery 라이브러리를 사용할 경우 return false; 구문을 통해

 

해당 이벤트를 취소하며, 상위 요소에 걸린 이벤트를 호출하지도 않습니다.

 

즉, JQuery 라이브러리를 사용할 경우 return false는

Event.preventDefault()와 Event.stopPropagation()를 함께 사용한 것과 같습니다.

 

 

ref. https://developer.mozilla.org/