EVENT

자바스크립트에서 예시로 이런 html 코드를 만들었고 버튼에  버튼에  addEventListener("click")을 주었다고 가정해보자.

자바스크립트에서 "캡처링"과 "버블링"이 존재하는데 addEventListener()을 주면 버블링이 단계가 실행된다.

"캡처링"단계란 실행이 외부에서 내부순서로 진행되는 것이다.

"버블링"단계란 실행이 내부에서 외부순서로 진행되는 것이다.

 

그래서 우리가 코드를 div영역과 button영역에 addEventListener()을 주고 button을 클릭하면 

 

"버블링"단계에 의해 button event가 먼저 출력이 되는걸 볼수 있다.

 

하지만  addEventListener에 true을 주면  "버블링"단계가  바뀔것을 확인할수 있다. 이것은 실행 순서를 바꾸는데 유용할것 같다.

 

그리고  stopPropagation을 사용하면 조상 이벤트를 처리하지 못하게 하는 것도 있었다.