[JS] bubbling & capturing

 

bubbling : 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작

 

 

capturing : bubbling의 역순으로 생각하면 된다.

 

 

 

 

문제점

부모, 자식 구조에서 둘다 click 할 때, 이벤트가 발생하도록 되어진 상황. 

자식만 클릭하여 실행하고 싶지만 겹쳐있기 때문에 부모 이벤트도 발생.

 

해결방안

1. stopPropagation

 뜻 그대로 전달을 멈춘다. stopImmediatePropagation과 같이 사용하면 막을 수 있지만 자연스러운 흐름을 강제로 종료하기 때문에 가급적 사용하지 않기. 

 

2. event.target과 evnet.currentTarget이 다른 점을 이용

 부모쪽에

if (event.target !== event.currentTarget) {

return;

}

입력하면 event.target은 부모지만 event.currentTarget은 자식쪽에 발생하기 때문에 실행되지 않는다.