이벤트 추가 및 제거
index.html 코드
style.css 코드
child 요소의 높이가 부모 요소의 높이보다 길기 때문에 overflow auto가 적용되어 스크롤이 생겼다.
1. addEventListener()
: 대상에 이벤트 청취(Listen)를 등록한다. 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출된다.
parentEl 요소를 클릭할 경우, addEventListener의 두 번째 인수인 핸들러 함수가 실행되는 것임. 
↑ parentEl을 클릭한 경우
↑ childEl을 클릭한 경우
childEl은 parentEl에 포함되는 것이므로 출력 결과가 이러함.
2. removeEventListener()
: 대상에 등록했던 이벤트 청취를 제거한다. 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수도 있다.
parentEl 요소를 클릭했을 경우만 결과가 출력되며, childEl을 클릭하면 아무 값도 도출되지 않는다. 왜냐하면, childEl 요소에 이벤트 리스너를 제거했기 때문.
이벤트 객체
: 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다.
addEventListener의 두 번째 인수인 핸들러 함수의 매개변수로 event 객체를 넣을 수 있음.
↑ parentEl을 클릭했을 때
↑ childEl을 클릭했을 때
target 속성 : 이벤트가 발생한 해당 요소(클릭한 부분에 해당하는 요소)
currentTarget 속성 : 이벤트가 등록된 요소
이번엔 parentEl을 클릭 시, event 객체 자체를 출력하도록 해보면
PointEvent라는 객체가 하나 출력되었음. 발생한 이벤트의 다양한 정보가 포함되어 있다.
pointerEvent는 일종의 마우스 이벤트.
이번에는 'wheel'이라는 이벤트를 적용해 보겠다.
스크롤을 올리면 음수, 내리면 양수로 출력.
이번에는 HTML 파일에 input 태그를 추가하고, keydown 이벤트를 추가해 보겠음. event.key 속성은 눌린 키에 대한 정보를 제공하는 역할.
입력하는 대로 콘솔창에 출력됨. enter, esc, shift 다 출력 가능.
기본 동작 방지
기본 동작 : 브라우저에서 제공하는 동작(스크롤, a 태그를 통해 페이지 이동 등...)
이러한 기본 동작들을 방지할 수 있는 것이 이벤트 객체의 preventDefault라는 메소드임.
wheel은 기본 동작에 해당되므로 이벤트가 잘 작동함.
event 객체의 preventDefault() 메소드를 사용.
출력은 잘되나 스크롤이 움직이지 않게 됨.
즉, 기본 동작 방지라는 것은 해당 이벤트의 발생을 막는 것이 아니라 브라우저가 가지고 있는 기본 동작만 방지함. 
이번엔 a 태그에 preventDefault 메소드를 사용해 보겠다.
원래는 a 태그를 눌렀을 시 해당 링크로 페이지가 이동하지만, 아무런 움직임이 없는 상태.
이벤트 버블링, 캡처링
1. 이벤트 버블링
내가 만약 a 태그 영역을 클릭한다고 한다면,
링크 영역은 a 태그의 영역이기도 하면서 child 영역, parent 영역, body 영역, window 영역이기도 한 것임. 
그래서 a 링크 부분을 클릭하더라도 이벤트가 걸려져 있는 영역은 다 출력됨. 클릭을 한 부분을 기준으로 가장 먼저 동작한 것의 이벤트 내용이 출력되는 것. 점점 넓은 범위로 이벤트가 올라가면서 발생했으며 이러한 현상을 '이벤트 버블링'이라고 한다. (거품이 발생하는 것 같다는...)
즉, 이벤트 버블링이란 후손 요소로부터 상위 요소로 이벤트가 전파되는 것이러한 현상을 특정 부분에서 정지시킬 수 있는데, 이벤트 객체에서 사용할 수 있는 stopPropagation 메소드임.
propagation : 전파
parentEl 부분에 stopPropagation 메소드를 걸었기 때문에 parentEl의 상위 요소 부분으로는 이벤트가 전파되지 x. 
body, window 객체 부분은 출력되지 x. 이벤트 버블링 현상을 정지시켰다. 이벤트는 상위 요소로 전파되는 성질을 가지고 있기 때문에 내가 원하지 않는 동작들이 실행될 가능성이 있음. 그러한 문제를 방지할 때 유용하다.
2. 이벤트 캡처링
body 영역의 addEventListener 메소드의 세 번째 인수로 {capture : true} 값을 넣어주게 되면? child 요소를 클릭했을 때 어떤 결과가 나타날까.
세 번째 인수로 capture : true 라는 객체가 들어간 body 영역의 이벤트가 먼저 동작하고, 그 이후 child부터 상위 요소로 이벤트가 버블링된다.
더 낮은 단계의 요소에서부터 조상 요소로 이벤트가 전파될 때, 중간에 이벤트가 먼저 동작하게 만들기 위해서 capture 옵션을 제공할 수 있다는 것.
이번엔 parent 영역에도 capture 옵션을 넣어보았음. 어떻게 동작할까?
body, parent 순으로 동작, 그다음은 child -> window 순으로 버블링됨.
즉, capture 옵션을 추가해서 더 상위 요소의 이벤트가 먼저 동작하게 만드는 것을 '이벤트 캡처링'이라고 한다.
만약, body 영역에 stopPropagation 메소드를 통해 이벤트 버블링을 정지시킨다면? child 요소에 클릭했을 때 어떻게 동작할까.
window, body 모두 capture 옵션이 있기 때문에 순행적으로 진행되다가, body 영역에 이벤트 버블링을 정지하는 stopPropagation 메소드가 있으므로 parent 요소로 넘어가지 않는다. 그렇기에 window, body 영역의 이벤트 내용만 콘솔창에 출력됨.
[ ++ 간단한 예제]
이벤트 리스너를 등록함과 동시에 바로 다음 코드에서 이벤트 리스너를 제거.
그렇기에 아무런 동작을 하지 않는다.
하지만 
capture 옵션을 넣어주게 되면,
parent 요소를 클릭했을 시, 이벤트가 잘 동작함.
