6. 이벤트의 흐름

자식요소에서 어떠한 이벤트가 실행될 때 부모의 요소까지 전파되어 실행된다. html( body( div 이렇게 예를 들어 div에서 이벤트가 실행되면 html과body 모두 이벤트가 실행된다. 이때 순서는 html(캡처링) →body(캡처링)→div→body(버블링)→htm(버블링)l의 실행순이다. 여기서 html과 body과 중복 실행되니 캡처링과 버블링을 선택하여 사용한다. 기본값으로 버블링이 선택되어있다.

캡처링 target 보다 먼저 실행되는 것

버블링 target 보다 나중에 실행되는 것

7. Event 객체

이벤트요소와 발생한 이벤트에 대한 정보이며 생성되어 이벤트 핸들러의 인자로 작용함

이때 이벤트핸들러의 매개변수를 명시해야 하는데 대부분 e로 한다.

7.1 Event Property

1. event target (e.target 은 언제나 바인딩된 요소를 가르킨다. 왜냐면 바인딩된 요소로 실행시켰기 때문이다) event를 발생시킨 요소
2. current target 실행된 event의 주인요소
3. Event.type 이벤트의 종류를 나타냄 ex) click, focus, keyup, keydown ...
4. Event.cancelable 요소의 기본 동작을 취소시킬 수 있는지 여부(true/false)를 나타낸다.

9. 기본 동작의 변경

9.1 Event.preventDefault()

폼을 submit하거나 링크를 클릭하면 다른 페이지로 이동하게 된다. 이와 같이 요소가 가지고 있는 기본 동작을 중단시키기 위한 메소드가 preventDefault()이다. → event.cancleable은 boolean 값을 반환함

9.2 Event.stopPropagation()