밀레 2020 프런트 엔드 학교 모집 펜 질문하여 addEventListener 이벤트 트리거 순서

다음 운영 결과) (프런트 엔드 코드이다

<div id="box1">
  <div id="box2">
    content
  </div>
</div>
<script>
const $ = document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener('click', () => {
  console.log('box1 true');
}, true);
box1.addEventListener('click', () => {
  console.log('box1 false');
}, false);
box2.addEventListener('click', () => {
  console.log('box2 true');
}, true);
box2.addEventListener('click', () => {
  console.log('box2 false');
}, false);
</script>

참고 : 트리거 무대하여 addEventListener (유형, 콜백, useCapture를) ) 이벤트
이벤트 캡처 -> 버블 링 이벤트
1, 이벤트 캡처
캡처 유형의 이벤트 (이벤트 캡처) : 가장 부정확 한 객체 (문서 객체)의 이벤트가 다음 트리거를 시작하고, (당신은 또한 윈도우 레벨에서 이벤트를 캡처 할 수 있지만, 개발자가 지정되어야합니다) 가장 정확한
2, 이벤트가 버블 링
타입의 버블 링 : 이벤트의 가장 최소한 대상에 대한 특정 대상 시퀀스에서 특정 이벤트에 따라 이벤트 (문서 객체) 트리거.

어디 매개 변수 useCapture를의
진짜야 쇼 캡처 이벤트 트리거
거짓 버블 링 이벤트를 트리거
클릭 컨텐츠
시작 이벤트 캡처, 문서 수준> ... -> box1-> BOX2, useCapture를 트리거 그 사실 이벤트
출력 BOX1 진정한 BOX2 진정한
시작 이벤트 버블 링 box2-> box1-> ... -> 문서; useCapture를 거짓 트리거링 이벤트
출력 BOX2 거짓 BOX1의 거짓