DOM트리내 요소노드들은 중첩구조를 가지기때문에 이벤트또한 중첩발생되는것은 당연한 현상이다.
예를들어 document.body요소노드 내에 div요소노드가 있을때 div에 클릭이밴트가 발생했다면 div를 감싸고 있는 document.body 또한 클릭이벤트가 발생해야 한다.
그렇다면 document.body와 div 둘중 어떤 요소노드에서 이밴트가 먼저 발생해야 할까?
가장 안쪽에 있는 요소노드부터 발생하여 바같쪽으로 이밴트가 발생하는 방식을 버블링이라고 하고
가장 바같에 있는 요소노드에서 먼저 발생하고 안쪽으로 이밴트가 발생하는 방식을 캡쳐링이라고 한다.
대부분의 시스템에서 버블링방식으로 이벤트가 진행되고 옵션으로 캡쳐링도 선택이 가능하다.
event.target
이벤트가 발생한 가장 안쪽에 있는 요소노드를 타깃(target)요소라고 하고 event.target으로 접근할 수 있다.
버블링방식일 경우 가장 먼저 이벤트가 발생한다.
event.target과 event.currentTarget의 차이점
event.target은 가장 안쪽에 있는 요소노드이므로 버블링이 진행되어도 값은 변하지 않는다.
event.currentTarget은 버블링방식으로 이벤트가 진행되어 현재 실행중인 핸들러가 할당된 요소노드를 참조한다. 값은 가장 안쪽 요소노드부터 시작하여 외부요소노드중에 하나다.
중첩된 요소노드들에 각각 이벤트핸들러를 할당하여 처리할 수 있다.
그러나 이벤트버블링에서 핸들러에게 전달되는 event객체에 event.target와 event.currentTarget 2가지 프로퍼티를 제공하기때문에 외부의 이벤트핸들러에서 event.target에 접근할 수 있다.
이것은 외부요소의 핸들러만 할당하면 구지 내부요소의 핸들러를 할당하지 않아도 구분하여 처리할 수 있는 이점을 가져다 준다.
버블링중단하기
이벤트버블링은 타깃 이벤트에서 시작해서 document객체를 만날 때까지 각 노드에서 모두 발생한다.
그런데 특정 요소노드의 핸들러에서 이벤트를 완전히 처리하고 난 후 더이상 이벤트버블링이 진행될 필요가 없을 경우도 발생한다.
event.stopPropagation();를 사용하면 이벤트버블링이 중단된다.
event.stopPropagation();은 상위요소로의 이벤트버블링을 중단시키지만 해당 요소의 다중이벤트핸들러는 중단시키지 않는다.
event.stopImmediatePropagation();는 버블링과 해당요소의 다른 이벤트핸들러도 중단시킨다.
