[js] e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation()

JavaScript에서 Event의 중지 관련 e.preventDefault() VS e.stopPropagation() VS e.stopImmediatePropagation()

Event.preventDefault()

1. Event 인터페이스의 preventDefault()메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.
2. preventDefault()를 호출한 이벤트도 preventDefault이벤트를 받는 요소 중 하나에서 stopPropagation() 또는 stopImmediatePropagation()을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파된다.
3. cancelable: true 없이 EventTarget.dispatchEvent()로 발송한 이벤트처럼 취소 불가능한 이벤트의 경우, preventDefault()를 호출해도 아무 효과도 나타나지 않는다.

4. HTML에서 a 태그의 페이지를 이동시키는 등의 태그마다 고유의 동작이 있고 e.preventDefault는 그 동작을 중단시킨다.

 

구문

event.preventDefault();

 

Event.stopPropagation()

1. Event 인터페이스의 stopPropagation()메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지한다.

2. 쉽게 말해 상위 엘리먼트들로의 이벤트 전파(이벤트 버블링)를 중지한다.

3. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, stopPropagation()이 링크나 버튼의 클릭을 막는 것은 아니다.

4. 기본 동작을 방지하려면 preventDefault()메서드를 사용해야 한다.

5. stopPropagation()은 같은 이벤트 대상에 선언한 stopPropagation이벤트를 받는 다른 요소까지 막지는 않는다.

6. 같은 이벤트 대상에 선언한 다른요소까지 막으려면 stopImmediatePropagation()를 사용해야 한다. 

 

구문

event.stopPropagation();

 

Event.stopImmediatePropagation()

1. Event 인터페이스의 stopImmediatePropagation()메서드는 같은 이벤트에 대해 나머지 stopImmediatePropagation이벤트를 받는 요소가 발동하지 못하도록 방지한다.
2. 같은 이벤트 유형에 대한 다수의 stopImmediatePropagation이벤트를 받는 요소를 하나의 요소에 선언한 경우, 각각의 이벤트를 받는 요소 호출 순서는 선언되는 순서와 동일하다.

3. stopImmediatePropagation이벤트를 받는 요소들 중 하나에서 stopImmediatePropagation()메서드를 호출하면 그 이후의 나머지 stopImmediatePropagation이벤트를 받는 요소들은 호출되지 않는다.

 

구문

event.stopImmediatePropagation();