[JS]Javascript 이벤트 전파 막기

Javascript 이벤트 전파 막기

이벤트 전파를 막을 수 있는 방법에는 대표적으로 3가지가 있습니다. e.stopPropagation(), e.stopImmediatePropagation(), e.preventDefault()

이번 포스팅에서는 각각의 특징에 대해서 알아보도록 하겠습니다.

1. e.stopPropagation();

 e.stopPropagation() 메소드를 호출하면 버블링 단계에서 상위로 가는 이벤트 전파를 막을 수 있습니다.

만약, 1번째 요소에 e.stopPropagation() 메소드를 호출하고, 1번 요소를 클릭하면 호출은 1번 요소만 호출되게 됩니다.

또한, stopPropagation은 한 요소에 여러개의 리스너가 등록되어 있어도, 모두 실행하고 전파를 막습니다. 

그래서 1번 요소에 리스너를 여러개 등록하고, stopPropagation을 호출해도 이벤트들을 모두 수행하고 전파를 막게 됩니다. 

2. e.stopImmediatePropagation();

e.stopImmediatePropagation 메소드를 호출하면, 같은 요소의 다른 이벤트도 막고, 상위로 가는 이벤트도 막습니다. 

그리하여 만약, 1번 요소에 이벤트가 2개가 걸려있고, 상위 요소에 이벤트가 있어도, 결과는 1번 요소의 첫번째 이벤트만 호출이 되고 다른 이벤트들은 다 막히게 됩니다.

3. e.preventDefault();

e.preventDefault() 는 이벤트를 취소하는 역할을 하고 있습니다. 

그래서 <form> 에서 submit을 한 후, 입력한 텍스트가 맞지 않으면 e.preventDefault() 를 사용하여 submit 이벤트를 취소할 수 있습니다.

그리고, e.preventDefault() 는 기본 기능까지 막을 수 있습니다. 이게 무슨 말이냐면, 

e.stopPropagation나 e.stopImmediatePropagation 같은 경우에는 a 태그에 url를 걸어놔도 클릭하여 해당 url 로 이동할 수 있지만,

e.preventDefault() 같은 경우에는 a 태그에 url을 걸어도 이동할 수 없습니다. 

참고

http://programmingsummaries.tistory.com/313