[JavaScript] 이벤트 전파 중단하는 방법(버블링)

이벤트전파과정?

이벤트가 발새앟면 해당 객체의 이벤트 처리기를 호출하고, 해당요소와 조상요소에 등록된 모든 이벤트처리기가 호출함.

브라우저는 자식요소부터 부모요소 부모의 부모요소까지 올라갔다가 다시 타겟요소까지 내려오면서 해당 이벤트에 반응하는 이벤트 처리기나, 리스너가 등록되어있는지 확인하고 발견되면 기억했다 실행함

• 캡처링 - 윈도우 -> dom ->이벤트(이벤트리스너보다 먼저 실행)
• 타깃 - 이벤트타깃에 전파
• 버블링 - 타깃에서 시작해 윈도우까지 전파

 

버블링?

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 현상을 말하는데, 이 동작이 가장 최상단의 조상 요소를 만날 때까지 반복합니다 이런것을 마치 물속안에 있는 거품과 닮았다고 해서 버블링이라고 합니다. 버블링은 거의 모든이벤트가 되는데(예외있음) 이것을 막는것이 중요합니다.

 

타겟?

event.target을 지정하면 부모요소의 핸들러는 이벤트가 정확히 어디서 발생했는지의 정보를 얻어올 수 있습니다.

 

event.preventDefault()

그 타겟요소의 기본동작을 막을 수 있음(reload, submit 등등)

 

event.stopPropagation()

한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 경우, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작하는데 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들어들이 동작하는 것은 막지 못함.

이것을 사용시 중첩메뉴가 있을 경우 addEventListener를 사용하면 코드 분석시 버블링을 막아놓는 곳은 보지 못함. 핸들러의 이벤트 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게하면 아래쪽에서 무슨일이 일어나는지를 부모요소의 핸들러에게 전달할 수 있어서 이 방법으로도 통제가능

 

event.stopImmediatePropagation()

요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않음.

 

 

캡처링(capturing)

이벤트가 하위요소로 전파되는 단계(실제 타깃요소에 전달되는 단계이전)임. 주로 addEventListener로 잡아낼때 사용하는데 {capture:true}를 사용하게 되면 다 잡아 낼 수 있음

 

event.eventPhase

현재발생중인 이벤트의 흐름의 단계를 알 수 있음 return 값은 정수임.