#기본기16_자바스크립트 이벤트 버블링과 캡처링은 무엇인가?

이벤트 버블링(Event Bubbling) - 버블이 폭발해서 올라간다 생각하자

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 올라가는 과정을 의미합니다. 즉, 이벤트 버블링 단계에서 이벤트는 발생한 요소로부터 상위 요소로 이동합니다. 이벤트 버블링은 일반적으로 이벤트 리스너의 세 번째 인수로 false를 전달하여 활성화됩니다.

        <div onclick="alert('여기는 상위div')">  // 이곳이 실행된다
            <li>여기는 리스트, 이벤트핸들러</li> // 여기 클릭시 
        </div>

이벤트 캡처링(Event Capturing) - 위에서 포착해서 사로잡는다 생각하자

이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 실제 대상 요소에 도달할 때까지 내려가는 과정을 의미합니다. 즉, 이벤트 캡처링 단계에서 이벤트는 최상위 요소에서 시작하여 하위 요소로 이동합니다. 이벤트 캡처링은 일반적으로 이벤트 리스너의 세 번째 인수로 true를 전달하여 활성화됩니다.

 

발생순서 

1.이벤트 캡처링 

2.이벤트 타겟에 도달

3.이벤트 버블링

 

1. window=>html=>body=>form=>div=> 2. li(event.target일경우)

3. li=> div => form => body => html => window

 

event.stopPropagation()으로 상위로 올라가는 버블링을 막을 수 있다.

위아래 다 막으려면 event.stopImmediatePropagation()을 사용해야 한다.

 

event.target() - 현재 클릭한 부분

event.currentTarget() - 실제 이벤트핸들러가 적용된 부분(event.target과 일치할 수도 있음)

 

이벤트 위임은 부모요소에 이벤트핸들러 함수를 적용한 후에 if문으로 조건을 달아주면 된다

if(event.target.tagName === 'div') {

   console.log('이벤트 위임')

}